シンプルセレクタを半角スペースで区切ると前のシンプルセレクタの子孫であるシンプルセレクタに対してスタイルを適用する。最後のシンプルセレクタが適用対象。
下の例ではp要素内のspan要素内のem要素に対してスタイルを適用。
p span em {text-decoration:underline;}
<p>p要素内の<span>span要素内の<em>em要素</em></span></p>
下の例ではp要素内のspan要素内のクラス名がex1の要素に対してスタイルを適用。
.ex1 {color:black;background-color:yellow;font-weight:normal;font-style:normal;}
p span .ex1 {text-decoration:underline;}
<p>p要素内の<span>span要素内の<em class="ex1">クラス名がex1のem要素</em></span></p>
シンプルセレクタを”>”で区切ると前のシンプルセレクタの直接の子孫である後のシンプルセレクタに対してスタイルを適用する。最後のシンプルセレクタが適用対象。
下の例ではp要素の直接の子孫のspan要素の直接の子孫のstrong要素に対してスタイルを適用。
p > span > strong {text-decoration:underline;}
<p>p要素の<span>直接の子孫のspan要素の<strong>直接の子孫のstrong要素</strong></span></p>
下の例ではp要素内の直接の子孫のspan要素の直接の子孫のクラス名がex2の要素に対してスタイルを適用。
.ex2 {color:black;background-color:yellow;font-weight:normal;font-style:normal;}
p > span > .ex2 {text-decoration:underline;}
<p>p要素の<span>直接の子孫のspan要素の<strong class="ex2">直接の子孫のクラス名がex2のstrong要素</strong></span></p>
シンプルセレクタを”+”で区切ると両方のシンプルセレクタが同じ親要素をもち、前のシンプルセレクタの直後のシンプルセレクタに対してスタイルを適用する。上述の組み合わせの様に３つ以上のシンプルセレクタを用いて適用対象とするセレクタを特定することはできない。
下の例では同じ親要素を持つp要素の直後のクラス名がex3の要素に対してスタイルを適用。この段落がスタイル適用対象。
.ex3 {color:black;background-color:yellow;font-weight:normal;font-style:normal;}
p + .ex3 {text-decoration:underline;font-style:italic;}