ユニバーサルセレクタとは？
ユニバーサルセレクタ (*) は、その名の通り、HTML文書内の全ての要素にスタイルを適用するためのCSSセレクタです。まるで、ドキュメント全体に広がる大きな網のように、全ての要素を一度に捉えることができます。
基本的な使い方
ユニバーサルセレクタは非常にシンプルで、アスタリスク記号 (*) だけで表現されます。例えば、以下のように記述すると、ページ上の全ての要素の文字色を赤色に設定できます。
<style>
* {
color: red;
}
</style>
使用例
ユニバーサルセレクタは、以下のような場面で特に役立ちます。
| 用途 | 説明 |
|---|---|
| リセットCSS | ブラウザデフォルトのスタイルをリセットし、デザインの統一性を保ちます。 |
| 特定要素の子孫要素全てにスタイル適用 | 特定の要素を起点に、その子孫要素全てにスタイルを適用できます。 |
| 大規模なスタイル変更の際に、特定のスタイルを一括適用 | 例えば、フォントファミリーをサイト全体で変更する場合などに便利です。 |
リセットCSSの例
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
特定要素の子孫要素全てにスタイル適用
<style>
.container * {
font-family: sans-serif;
}
</style>
<div class="container">
<p>このテキストは sans-serif フォントで表示されます。</p>
<ul>
<li>リストアイテムも sans-serif フォントです。</li>
</ul>
</div>
注意点
ユニバーサルセレクタは強力ですが、使いすぎるとパフォーマンスに影響を与える可能性があります。特に、大規模なWebサイトでは注意が必要です。
- 可能な限り、より具体的なセレクタを使用する
- スタイルの適用範囲を限定する
参考資料
関連QA
Q1: ユニバーサルセレクタと他のセレクタを組み合わせて使うことはできますか？
A1: はい、可能です。例えば、「header要素内の全てのp要素」にスタイルを適用する場合は、header * pのように記述します。
Q2: ユニバーサルセレクタはどのタイミングで使うのが効果的ですか？
A2: サイト全体のベースとなるスタイルを設定する際や、特定のコンポーネント内の全ての要素にスタイルを一括適用したい場合などに効果的です。
Q3: ユニバーサルセレクタを使う上での注意点はありますか？
A3: パフォーマンスへの影響を考慮し、必要以上に使用しないように心がけましょう。また、より具体的なセレクタが使える場合は、そちらを優先して使用することをおすすめします。
その他の参考記事:jquery セレクタ 変数