CSSにおける子孫セレクター

ここにulリストと olリストがあるとします：

html<ul>
  <li>テキスト</li>
  <li>テキスト</li>
  <li>テキスト</li>
  <li>テキスト</li>
  <li>テキスト</li>
</ul>
<ol>
  <li>テキスト</li>
  <li>テキスト</li>
  <li>テキスト</li>
  <li>テキスト</li>
  <li>テキスト</li>
</ol>

これらのリスト内のliタグを 赤色にしてみましょう：

cssli {
  color: red;
}

今度は、ulリスト内のliタグは赤色、 olリスト内のliタグは緑色に したいとします。

この場合、子孫セレクターが役立ちます。 これは親要素に基づいてタグを選択できます。 親のセレクターを書き、スペースを空けて、 子孫のセレクターを指定します。 今回の場合、セレクターul liは ulリスト内のすべてのliタグを選択し、 セレクターol liはolリスト内の すべてのliタグを選択します。 それぞれ希望の色に着色してみましょう：

cssul li {
  color: red;
}
ol li {
  color: green;
}

子孫セレクターは必ずしも2つのタグセレクターで 構成される必要はなく、スペースで区切られた 任意の数のセレクターで構成できます。 例えば、次のコードでは、liタグ内にあり、 そのliタグがさらにulタグ内に 存在するすべてのiタグが選択されます：

cssul li i {
  color: red;
}

html<ul>
  <li>テキスト <i>斜体</i></li>
  <li>テキスト <i>斜体</i></li>
  <li>テキスト <i>斜体</i></li>
  <li>テキスト <i>斜体</i></li>
</ul>

<p>
  段落テキスト <i>斜体</i>
</p>
<p>
  段落テキスト <i>斜体</i>
</p>

html<p>
  段落テキスト <b><i>太字斜体</i></b>
</p>
<p>
  段落テキスト <i>斜体</i>
</p>