Complexe combinaties van descendant selectors en classes in CSS

Stel dat we nu de volgende code hebben:

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>

Laten we alle elementen met de klasse header vinden, die zich binnen een element met de klasse block bevinden, en ze het lettertype Arial geven:

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

Zoals te zien is in de HTML code, kunnen binnen een element met de klasse block elementen met de klasse header zowel koppen h2 als koppen h3 zijn. Laten we selectors schrijven die deze koppen onderscheiden, en iets met deze koppen doen.

Laten we alle h2 met de klasse header selecteren, die zich binnen een element met de klasse block bevinden:

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

En laten we nu alle h3 met de klasse header selecteren, die zich binnen een element met de klasse block bevinden:

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

Laten we al onze CSS samenvoegen:

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

Laten we dit toepassen op onze HTML code:

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