Monimutkaiset jälkeläisvalitsijan ja luokkien yhdistelmät CSS:ssä

Oletetaan, että meillä on seuraava koodi:

html<div class="block">
  <h2 class="header">Otsikko h2</h2>
  <p>
    teksti
  </p>
  
  <h3 class="header">Otsikko h3</h3>
  <p>
    teksti
  </p>
  <p>
    teksti
  </p>
</div>
<div class="block">
  <h2 class="header">Otsikko h2</h2>
  <p>
    teksti
  </p>
  
  <h3 class="header">Otsikko h3</h3>
  <p>
    teksti
  </p>
  <p>
    teksti
  </p>
</div>

Etsitään kaikki luokan header omaavat elementit, jotka sijaitsevat luokan block elementin sisällä, ja asetetaan niille fontti Arial:

css.block .header {
  font-family: Arial;
}

Kuten HTML-koodista voidaan nähdä, luokan block elementin sisällä luokan header omaavat elementit voivat olla joko h2- tai h3-otsikoita. Kirjoitetaan valitsijat, jotka erottelevat nämä otsikot, ja tehdään jotain näille otsikoille.

Valitaan kaikki luokan header omaavat h2-elementit, jotka sijaitsevat luokan block elementin sisällä:

css.block h2.header {
  font-size: 30px;
  color: red;
}

Ja nyt valitaan kaikki luokan header omaavat h3-elementit, jotka sijaitsevat elementin luokan block sisällä:

css.block h3.header {
  font-size: 20px;
  color: green;
}

Kootaan koko CSS-yhteensä:

css.block .header {
  font-family: Arial;
}
.block h2.header {
  font-size: 30px;
  color: red;
}
.block h3.header {
  font-size: 20px;
  color: green;
}

Sovelletaan sitä HTML-koodiimme:

css.eee .bbb {
  color: red;
}

css.eee h2 {
  color: red;
}

css.eee h2.bbb {
  color: red;
}

css.eee h3.bbb {
  color: red;
}

css.eee p.bbb {
  color: red;
}

css.eee .bbb .kkk {
  color: red;
}