CSS:n jälkeläisvalitsimet

Oletetaan, että meillä on lista ul ja lista ol:

html<ul>
  <li>teksti</li>
  <li>teksti</li>
  <li>teksti</li>
  <li>teksti</li>
  <li>teksti</li>
</ul>
<ol>
  <li>teksti</li>
  <li>teksti</li>
  <li>teksti</li>
  <li>teksti</li>
  <li>teksti</li>
</ol>

Väritetään li-tagit näissä listoissa punaiseksi:

cssli {
  color: red;
}

Oletetaan nyt, että haluamme värittää ul-listan li-tagit punaiseksi ja ol-listan li-tagit vihreäksi.

Tässä tapauksessa jälkeläisvalitsin auttaa meitä. Sen avulla voidaan valita tageja niiden vanhemman perusteella. Tätä varten on määritettävä vanhemman valitsin, ja välilyönnillä erotettuna - jälkeläisen valitsin. Meidän tapauksessamme valitsin ul li valitsee kaikki li-tagit ul-listasta ja valitsin ol li valitsee kaikki li-tagit ol-listasta. Väritetään ne tarvittaviin väreihin:

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

Jälkeläisvalitsimen ei tarvitse koostua vain kahdesta tagivalitsimesta - niitä voi olla mikä tahansa määrä, kirjoitettuna välilyönnillä erotettuna. Seuraavassa koodissa esimerkiksi valitaan kaikki i-tagit, jotka sijaitsevat li-tagin sisällä, jotka puolestaan sijaitsevat ul-tagin sisällä:

cssul li i {
  color: red;
}

html<ul>
  <li>teksti <i>kursivoitu</i></li>
  <li>teksti <i>kursivoitu</i></li>
  <li>teksti <i>kursivoitu</i></li>
  <li>teksti <i>kursivoitu</i></li>
</ul>

<p>
  kappaleen teksti <i>kursivoitu</i>
</p>
<p>
  kappaleen teksti <i>kursivoitu</i>
</p>

html<p>
  kappaleen teksti <b><i>lihavoitu kursivoitu</i></b>
</p>
<p>
  kappaleen teksti <i>kursivoitu</i>
</p>