Descendant Selector in CSS

Stel we hebben een ul lijst en een ol lijst:

html<ul>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
</ul>
<ol>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
</ol>

Laten we de li tags in deze lijsten rood kleuren:

cssli {
  color: red;
}

Stel dat we nu de li tags van de ul lijst rood willen kleuren, en de li tags van de ol lijst - in groen.

In dit geval helpt de descendant selector ons. Hiermee kunnen we tags selecteren op basis van hun ouder. Om dit te doen moet u de selector van de ouder opgeven, gevolgd door een spatie - de selector van de descendant. In ons geval zal de selector ul li alle li tags uit de ul lijst selecteren, en de selector ol li - zal alle li tags uit de ol lijst selecteren. Laten we ze in de gewenste kleuren kleuren:

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

Een descendant selector hoeft niet per se te bestaan uit twee tag selectors - er kunnen er een willekeurig aantal zijn, gescheiden door een spatie. In de volgende code worden bijvoorbeeld alle i tags geselecteerd die zich binnen een li tag bevinden, die op hun beurt weer binnen een ul tag bevinden:

cssul li i {
  color: red;
}

html<ul>
  <li>text <i>cursief</i></li>
  <li>text <i>cursief</i></li>
  <li>text <i>cursief</i></li>
  <li>text <i>cursief</i></li>
</ul>

<p>
  paragraaf text <i>cursief</i>
</p>
<p>
  paragraaf text <i>cursief</i>
</p>

html<p>
  paragraaf text <b><i>vet cursief</i></b>
</p>
<p>
  paragraaf text <i>cursief</i>
</p>