Avkomsselektor i CSS

La oss si at vi har en liste ul og en liste ol:

html<ul>
  <li>tekst</li>
  <li>tekst</li>
  <li>tekst</li>
  <li>tekst</li>
  <li>tekst</li>
</ul>
<ol>
  <li>tekst</li>
  <li>tekst</li>
  <li>tekst</li>
  <li>tekst</li>
  <li>tekst</li>
</ol>

La oss fargelegge taggene li i disse listene i rødt:

cssli {
  color: red;
}

La oss nå si at vi vil fargelegge taggene li i ul-listen i rødt, og taggene li i ol-listen i grønt.

I dette tilfellet vil en avkomsselektor hjelpe oss. Den lar oss velge tagger basert på deres forelder. For å gjøre dette må du spesifisere selektoren for forelderen, og etter et mellomrom - selektoren for avkommet. I vårt tilfelle vil selektoren ul li velge alle li-taggene fra ul-listen, og selektoren ol li vil velge alle li-taggene fra ol-listen. La oss fargelegge dem i de ønskede fargene:

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

En avkomsselektor trenger ikke nødvendigvis å bestå av to taggselektorer - det kan være hvilket som helst antall av dem, skrevet med mellomrom. I følgende kode, for eksempel, velges alle i-taggene som befinner seg inne i en li-tagg, som igjen befinner seg inne i en ul-tagg:

cssul li i {
  color: red;
}

html<ul>
  <li>tekst <i>kursiv</i></li>
  <li>tekst <i>kursiv</i></li>
  <li>tekst <i>kursiv</i></li>
  <li>tekst <i>kursiv</i></li>
</ul>

<p>
  avsnittstekst <i>kursiv</i>
</p>
<p>
  avsnittstekst <i>kursiv</i>
</p>

html<p>
  avsnittstekst <b><i>fet kursiv</i></b>
</p>
<p>
  avsnittstekst <i>kursiv</i>
</p>