Leszármazott szelektorok a CSS-ben

Tegyük fel, hogy van egy ul listánk és egy ol listánk:

html<ul>
  <li>szöveg</li>
  <li>szöveg</li>
  <li>szöveg</li>
  <li>szöveg</li>
  <li>szöveg</li>
</ul>
<ol>
  <li>szöveg</li>
  <li>szöveg</li>
  <li>szöveg</li>
  <li>szöveg</li>
  <li>szöveg</li>
</ol>

Színezzük pirosra a li tag-eket ezen listákban:

cssli {
  color: red;
}

Tegyük fel most, hogy a ul lista li tag-jeit pirosra, a ol lista li tag-jeit pedig zöldre akarjuk színezni.

Ebben az esetben a leszármazott szelektor segít. Ez lehetővé teszi a tag-ek kiválasztását szülőjük alapján. Ehhez meg kell adni a szülő szelektorát, majd szóközzel elválasztva - a leszármazott szelektorát. A mi esetünkben a ul li szelektor kiválasztja az összes li tag-et a ul listából, a ol li szelektor pedig kiválasztja az összes li tag-et a ol listából. Színezzük őket a kívánt színekre:

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

A leszármazott szelektornak nem feltétlenül kell két tag szelektorból állnia - bármennyi lehet belőlük, szóközzel elválasztva. A következő kódban például minden i tag van kiválasztva, amely a li tag-en belül található, amelyek viszont a ul tag-en belül találhatók:

cssul li i {
  color: red;
}

html<ul>
  <li>szöveg <i>dőlt</i></li>
  <li>szöveg <i>dőlt</i></li>
  <li>szöveg <i>dőlt</i></li>
  <li>szöveg <i>dőlt</i></li>
</ul>

<p>
  bekezdés szöveg <i>dőlt</i>
</p>
<p>
  bekezdés szöveg <i>dőlt</i>
</p>

html<p>
  bekezdés szöveg <b><i>félkövér dőlt</i></b>
</p>
<p>
  bekezdés szöveg <i>dőlt</i>
</p>