CSS palikuonių selektoriai

Tarkime, kad turime ul sąrašą ir ol sąrašą:

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>

Nudažykime li žymes šiuose sąrašuose raudona spalva:

cssli {
  color: red;
}

Tarkime, kad dabar norime nudažyti ul sąrašo li žymes raudona spalva, o ol sąrašo li žymes - žalia spalva.

Šiuo atveju mums padės palikuonių selektorius. Jis leidžia pasirinkti žymes pagal jų tėvą. Norint tai padaryti, reikia nurodyti tėvo selektorių, o per tarpą - palikuonio selektorių. Mūsų atveju selektorius ul li pasirinks visas li žymes iš ul sąrašo, o selektorius ol li - pasirinks visas li žymes iš ol sąrašo. Nudažykime jas reikiamomis spalvomis:

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

Palikuonių selektorius nebūtinai turi būti sudarytas iš dviejų žymių selektorių - jų gali būti bet koks kiekis, parašytas per tarpą. Pavyzdžiui, toliau pateiktame kode pasirenkamos visos i žymes, esančios li žymės viduje, kurios savo ruožtu yra ul žymės viduje:

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>