文脈セレクタの拡張 - wicky @ ウィキ

文脈セレクタの拡張

　CSS2では文脈セレクタが拡張されており、より複雑な書式によって、ツリー構造にマッチするパターンをセレクタとして指定することが可能となっている。

　「>」を設定することによって、直接の子要素に対してのみマッチする子供セレクタを設定することができる。以下の例の場合、body要素の子要素として設定されているp要素に対してのみマッチする。たとえば、li要素内でp要素を設定しても、以下のパターンにはマッチしない。

●子供セレクタの設定例

body > p { color : brown; }

---

　また、アスタリスクを設定することで、特定の祖先要素を持つ子孫要素にマッチする子孫セレクタを設定することができる。以下の例の場合、div要素を祖先要素として持つ、div要素の孫要素あるいはそれより深い子孫要素であるp要素にマッチする。

●子孫セレクタの設定例

div * p { font-size : 9pt }

---

　要素を「+」でつなぐことによって、前後して出現する要素にマッチする隣接セレクタを設定することができる。対象となるのは、２番目に出現した要素。また、隣接セレクタを構成する要素は、同じ親要素を持っている必要がある。たとえば、以下の例の場合、h1要素とh2要素が前後して現れる場合にのみ、h2要素の上マージンが調整される。

●隣接セレクタの設定例

h1 + h2 { margin-top : -10px }