今回は,あらゆるブラウザのデファクト・スタンダードとなっているCSS2.1におけるセレクタのおさらいをします。セレクタとは,HTML側の任意の個所をCSS側で選択し,作成したスタイルを適用するための記述様式のことです。ブラウザがセレクタを解釈して,各要素にスタイルを反映させます。セレクタの種類の確認から,これらのセレクタを組み合わせてどんなことができるのかまでを一通り確認していきましょう。
一般的な4つのセレクタ
以下で示したセレクタが,現在あらゆるブラウザが実装しており,ほとんどのサイトで利用されているセレクタです(表1)。
セレクタ名 | 書式例 | 説明 |
---|---|---|
ユニバーサルセレクタ | * { margin: 0; } | すべての要素に一括してスタイルを指定 |
要素セレクタ | body { font-size: 87.5%; } | 記述した要素にスタイルを指定 |
クラスセレクタ | .note { color: red; } | noteというクラスを持つ要素にスタイルを指定 |
ユニバーサルセレクタ | #header { padding: 1em; } | headerというIDを持つ要素にスタイルを指定 |
セレクタを結合する子孫セレクタ
CSSでレイアウトを制御する際に重要なのが子孫セレクタです。任意のセレクタをスペースで続けて記述していくことで,要素の親子関係を表現することができます。子孫セレクタを利用すると,よりピンポイントでスタイルを指定することが可能となります。例えば,
#header ul li a em { color: blue; }
と記述することで,"headerというidを持つ任意の要素の中にある,ul要素の中にある,li要素の中にある,a要素の中にあるem要素"だけにスタイルを指定することができます(図1)。子孫セレクタを利用しないで,このような限定的なスタイルを指定する場合,対象となるem要素へは何かしらのクラスもしくはIDを指定する必要が出てきます。つまり子孫セレクタは,余計なクラス,IDを指定する必要がない(X)HTMLをシンプルに保てる方法というわけです。