Sudėtingos palikuonių selektoriaus ir klasių kombinacijos CSS

Tarkime, kad dabar turime tokį kodą:

html<div class="block">
  <h2 class="header">Pavadinimas h2</h2>
  <p>
    tekstas
  </p>
  
  <h3 class="header">Pavadinimas h3</h3>
  <p>
    tekstas
  </p>
  <p>
    tekstas
  </p>
</div>
<div class="block">
  <h2 class="header">Pavadinimas h2</h2>
  <p>
    tekstas
  </p>
  
  <h3 class="header">Pavadinimas h3</h3>
  <p>
    tekstas
  </p>
  <p>
    tekstas
  </p>
</div>

Raskime visus elementus su klase header, esančius elemento su klase block viduje, ir nustatykime jiems šriftą Arial:

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

Kaip matoma HTML kode, elemento su klase block viduje elementai su klase header gali būti ir h2 antraštės, ir h3 antraštės. Parašykime selektorius, atskiriančius šias antraštes, ir ką nors su šiomis antraštėmis padarykime.

Pažymime visus h2 su klase header, esančius elemento su klase block viduje:

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

O dabar pažymime visus h3 su klase header, esančius elemento su klase block viduje:

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

Sukelkime visą mūsų CSS kartu:

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

Pritaikykime jį mūsų HTML kodui:

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