Afkom-vælger i CSS

Lad os sige, at vi har en liste ul og en liste ol:

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>

Lad os farve li-tagsene i disse lister rød:

cssli {
  color: red;
}

Lad os nu sige, at vi vil farve li-tagsene i ul-listen rød, og li-tagsene i ol-listen - grøn.

I dette tilfælde kan en afkom-vælger hjælpe os. Den tillader at vælge tags baseret på deres forælder. For at gøre dette skal du angive forælderens vælger, og efter et mellemrum - afkommets vælger. I vores tilfælde vil vælgeren ul li vælge alle li-tags fra ul-listen, og vælgeren ol li - vil vælge alle li-tags fra ol-listen. Lad os farve dem i de ønskede farver:

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

En afkom-vælger behøver ikke nødvendigvis at bestå af to tag-vælgere - der kan være et hvilket som helst antal af dem, adskilt af mellemrum. I følgende kode vælges for eksempel alle i-tags, der befinder sig inde i et li-tag, som igen befinder sig inde i et ul-tag:

cssul li i {
  color: red;
}

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

<p>
  paragraph text <i>italic</i>
</p>
<p>
  paragraph text <i>italic</i>
</p>

html<p>
  paragraph text <b><i>bold italic</i></b>
</p>
<p>
  paragraph text <i>italic</i>
</p>