配置関係による選択

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

子孫結合子

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

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倍にする。

一般兄弟結合子

共通の親を持つ2つの要素のうち、後者の要素を特定するための規則が 一般兄弟結合子である。たとえば、

input:checked ~ label {background: yellow;}

とすると、チェックされているinput要素の背景色が黄色となる。

このHTML例を示す。

<div>
<input name="aaa" type="checkbox" value="aaa" id="button1">
<label for="button1">ごはん</label>
</div>
<div>
<input name="bbb" type="checkbox" value="aaa" id="button2">
<label for="button2">食パン</label>
</div>

隣接兄弟結合子

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

ul + p {text-indent: 0}

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

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

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