株式会社まぼろし
株式会社まぼろし 2008年8月設立。アクセシビリティ,ユーザービリティ,CMSの導入,SEO/SEMといったWebサイト制作から,ROIを意識したブランディング,ソーシャルメディアを用いたユーザーとのコミュニケーションの最適化など,マーケティング活動までを手がけるクリエイティブユニット。

 今回は,あらゆるブラウザのデファクト・スタンダードとなっているCSS2.1におけるセレクタのおさらいをします。セレクタとは,HTML側の任意の個所をCSS側で選択し,作成したスタイルを適用するための記述様式のことです。ブラウザがセレクタを解釈して,各要素にスタイルを反映させます。セレクタの種類の確認から,これらのセレクタを組み合わせてどんなことができるのかまでを一通り確認していきましょう。

一般的な4つのセレクタ

 以下で示したセレクタが,現在あらゆるブラウザが実装しており,ほとんどのサイトで利用されているセレクタです(表1)。

表1●ユニバーサルセレクタ,要素セレクタ,クラスセレクタ,IDセレクタの書式例
セレクタ名 書式例 説明
ユニバーサルセレクタ * { 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をシンプルに保てる方法というわけです。

図1●要素の親子関係
図1●要素の親子関係