【CSS】すべての子要素にスタイルを一括適用する方法(ユニバーサルセレクタの使い方)
![【CSS】すべての子要素にスタイルを一括適用する方法(ユニバーサルセレクタの使い方)](https://creatopia.jp/storage/images/eyecatch_75270.png)
公開日:
2023/05/28
/
更新日:
2023/05/28
目次
本記事では以下を解説します。
- CSSですべての要素にスタイルを一括適用する方法
- 任意の要素の、すべての子要素にスタイルを一括適用する方法
すべての要素にスタイルを一括適用するユニバーサルセレクタ*
の使い方
すべての要素に適用するセレクタは、CSSの「ユニバーサルセレクタ(*
= 半角アスタリスク)」で実現できます。
たとえば、次のように使います。
<h1>Hello, World!</h1>
<p>This is a paragraph.</p>
<div>
<h1>Welcome</h1>
<p>This is another paragraph.</p>
<span>This is a span element.</span>
</div>
/* すべての要素に適用されるユニバーサルセレクタ */
* {
color: red;
font-weight: bold;
}
/* 特定の要素にのみ適用されるセレクタ */
h1 {
background-color: yellow;
}
p {
text-decoration: underline;
}
![すべての要素にスタイルを一括適用するユニバーサルセレクタ*の使い方](https://images.microcms-assets.io/assets/6e313257045045279f46e11cc06c0be2/350b46eb7f744d57abc113bad1f58c7b/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-05-28%2014.49.17.png)
*
であてているcolor: red;
とfont-weight: bold;
はすべての要素に適用されています。
すべての子要素にスタイルを一括適用する
特定の親要素に含まれる、子要素のすべてにスタイルをあてたいときは、以下のようにします。
<h1>Hello, World!</h1>
<p>This is a paragraph.</p>
<div class="parent">
<h1>Welcome</h1>
<p>This is another paragraph.</p>
<span>This is a span element.</span>
</div>
/* parentクラスの子要素すべてに適用させる */
.parent * {
color: red;
font-weight: bold;
}
h1 {
background-color: yellow;
}
p {
text-decoration: underline;
}
![すべての子要素にスタイルを一括適用する](https://images.microcms-assets.io/assets/6e313257045045279f46e11cc06c0be2/4301f6e2df1e4c118ec591c9b6d905da/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-05-28%2014.55.32.png)
.parent *
とすることで、parentクラスの子要素のすべてにスタイルをあてられます。