Pēcteču selektori CSS

Pieņemsim, ka mums ir saraksts ul un saraksts 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>

Krāsosim li elementus šajos sarakstos sarkanā krāsā:

cssli {
  color: red;
}

Pieņemsim, ka tagad mēs vēlamies ul saraksta li elementus krāsot sarkanā krāsā, bet ol saraksta li elementus - zaļā krāsā.

Šajā gadījumā mums palīdzēs pēcteču selektors. Tas ļauj atlasīt elementus pēc to vecāka. Lai to izdarītu, jānorāda vecāka selektors, un pēc atstarpes - pēcteča selektors. Mūsu gadījumā selektors ul li atlasīs visus li elementus no ul saraksta, bet selektors ol li - atlasīs visus li elementus no ol saraksta. Nokrāsosim tos vajadzīgajās krāsās:

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

Pēcteču selektoram noteikti nav jāsastāv tikai no divu elementu selektoriem - to var būt jebkurš skaits, rakstīti atdalot ar atstarpēm. Piemēram, sekojošajā kodā tiek atlasīti visi i elementi, kas atrodas li elementa iekšienē, kas savukārt atrodas ul elementa iekšienē:

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>