今回は知っておくと便利なcssの小技 part16 セレクタの使い方編です。
バックナンバー
子セレクタ（親要素 > 子要素）の使い方
子セレクタとは、対象の親要素の直下にある子要素に対してのみスタイルを適用するセレクタです。
孫要素は対象になりません。
今回は親要素の直下の子要素に対してのみ、文字を赤色にしてみます。
DEMO
HTML
|
1 2 3 4 5 6 |
<article id="contents"> <p>親要素の範囲</p> <section> <p>孫要素の範囲</p> </section> </article> |
CSS
|
1 2 3 |
#contents > p{ color: #FF0000; } |
隣接セレクタ（要素1 + 要素2）の使い方
隣接セレクタでは、隣り合う要素の直後のもの（今回でいう『要素2』）の方にのみスタイルを適用することができます。
同じ階層にあっても指定した要素に隣接していなければスタイルは適用されません。
DEMO
HTML
|
1 2 3 4 |
<h2>h2と隣接するpは赤くなって、マージンがつく</h2> <p>赤くなる+マージン</p> <h3>h3と隣接するpはそのまま</h3> <p>赤くならない</p> |
CSS
|
1 2 3 4 |
#contents02 h2 + p{ color: #FF0000; margin-bottom: 30px; } |
