配置関係による選択

要素間の親子関係、隣接関係でマッチするスタイルを定義できる。

子孫選択子

ある要素が、別の要素に含まれる場合だけマッチするスタイルは 子孫選択子で指定する。

E F { ... }

とすると、E 要素の内部に含まれる F 要素に マッチする。

以下の例は class 属性値に "menu" を持つ div 要素内にある ul 要素に マッチするスタイル定義である。

div.menu ul {
  width: 10em; margin: 0 2px;
  background: #ee4;
}

この子孫選択により、一般の ul 要素との区別が以下のようになる。

<ul>
 <li>あああああああああああああああああああああああああああああああああああ</li>
 <li>いいいいいいいいいいいいいいいいいいいいい</li>
</ul>
<div class="menu">
<ul>
 <li>あああああああああああああああああああああああああああああああああああ</li>
 <li>いいいいいいいいいいいいいいいいいいいいい</li>
</ul>
</div>

というHTML文書は

のようにレンダリングされる。

子選択子

ある要素が別の要素の直接の子であるときにマッチするスタイルは 子選択子によって定義する。たとえば、

body>p {line-height: 1.5}

という定義は、bodyの直接の子であるp要素のみ行間を1.5倍にする。

隣接兄弟選択子

共通の親を持つ二つの要素が隣接している場合に、その後者の要素を 特定するための規則が隣接兄弟選択子である。たとえば、

ul + p {text-indent: 0}

とすると、ul要素の直後に来るp要素はインデントしないことを意味し、

h1 + h2 {margin-top: -1ex;}

とすると、h1要素の直後にh2要素が来るときは上マージンを少し減らすこと を意味する。