Komplekse kombinationer af afkom-vælger og klasser i CSS

Lad os nu antage, at vi har følgende kode:

html<div class="block">
  <h2 class="header">Titel h2</h2>
  <p>
    tekst
  </p>
  
  <h3 class="header">Titel h3</h3>
  <p>
    tekst
  </p>
  <p>
    tekst
  </p>
</div>
<div class="block">
  <h2 class="header">Titel h2</h2>
  <p>
    tekst
  </p>
  
  <h3 class="header">Titel h3</h3>
  <p>
    tekst
  </p>
  <p>
    tekst
  </p>
</div>

Lad os finde alle elementer med klassen header, der befinder sig inde i et element med klassen block, og indstil deres skrifttype til Arial:

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

Som det ses i HTML-koden, inde i elementet med klassen block kan elementer med klassen header være både overskrifter h2 og overskrifter h3. Lad os skrive vælgere, der skelner mellem disse overskrifter, og gøre noget med disse overskrifter.

Lad os vælge alle h2 med klassen header, der befinder sig inde i et element med klassen block:

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

Og lad os nu vælge alle h3 med klassen header, der befinder sig inde i et element med klassen block:

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

Lad os samle al vores CSS:

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

Lad os anvende det på vores HTML-kode:

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;
}