16.4.5 セレクタ(2) 親子関係の利用

属性の継承

次のHTML文書を見てください．

この文書に対し，CSSで

h1{ color:red; }

とすればh1要素が赤くなります．このとき，h1要素の中にあるstrong要素も赤く表示されます．このように，CSSでは親要素のスタイルはごく一部の例外を除いて子要素に引き継がれます．

下降セレクタ

上の例で，h1要素に対する指定の代わりに

strong{ color:red; }

とすれば，strong要素で囲まれた二つの「フェラーリ」という文字が赤く表示されます．ですがh1要素の中にあるフェラーリの文字だけ赤くしたい場合，これでは困ります．こういう時に用いるのが下降セレクタです．たとえば

h1 strong{ color:red; }

と書くと，h1要素の子要素にあたるstrong要素だけが赤くなります．一般に

セレクタ1 セレクタ2{ プロパティ:値 }

と書くと，セレクタ1で指定された要素の子要素であるセレクタ2に対してスタイルを指定することができます．このセレクタにはもちろん，HTMLの要素だけでなくクラス名やIDを利用することもできます．たとえば

.example strong{ color:red }

とすると，exampleクラスに該当する要素の子要素であるstrong要素に対して，スタイルが指定されます．

なお，ここで挙げた「子要素」というのは直接の子要素だけに限らず，子要素の子要素なども含まれています．たとえば

というHTML文書に対して

blockquote strong { color:red; }

とすると，blockquoteの孫要素にあたるstrong要素にもスタイルが適用されます．

子セレクタ

下降セレクタを用いると子要素，孫要素，…全てにスタイルが適用されてしまいます．そうではなく「直接の子要素」のみにスタイルを指定したい場合は，子セレクタを持ちいます．子セレクタは次の例のように セレクタ1 > セレクタ2 という形で記述します．

h1 > strong { color:red; }

宣言の衝突について

下降セレクタを利用した時も宣言の衝突が起こりえます．たとえば

blockquote strong{ color:red; }
p strong{ color:black; }

と書くと，blockquote要素の中にp要素があり，さらにその中にstrong要素があるときに色の指定が重複します．このような場合は，より内側にある要素に対するスタイル指定が有効になります．今の例では，strong要素に対して適用されるのは

color:black;

ということになります．