解 説

CSS2.1 セレクタ

  
セレクタのパターンマッチ
パターン 名称
h1,h2,h3 グループセレクタ セレクタをカンマ(,)で区切ってグループ化
* 全称セレクタ あらゆる要素にマッチする。
p タイプセレクタ p要素にマッチする。
div p 子孫セレクタ div要素の子孫であるp要素にマッチする。
div > p 子供セレクタ div要素の子供であるp要素にマッチする。
h1 + p 隣接兄弟セレクタ h1要素の直後にある弟のp要素にマッチする。

子供セレクタの例

子供セレクタは「p > em」のように「>」を使用して記述します。
以下の例ではpを直接の親とするem要素にマッチします。
結果としてem要素の「吾輩はここで始めて」だけが青文字になります。
子孫セレクタとの違いは直接の子要素のみマッチすることで孫要素はマッチしません。
下の例では2つめのp要素内のspanに囲まれたem要素にはマッチしません。
子供セレクタの例
HTMLコード

CSSコード

隣接兄弟セレクタ

隣接兄弟セレクタは「ul + p」のように記述します。
これはh3の直後にあるp要素にマッチします。
この例ではulのすぐ後のp要素が青文字になります。
隣接兄弟セレクタの例
HTMLコード

CSSコード