Összetett gyermekválasztó és osztály kombinációk a CSS-ben

Tegyük fel, hogy a következő kódunk van:

html<div class="block">
  <h2 class="header">Cím h2</h2>
  <p>
    szöveg
  </p>
  
  <h3 class="header">Cím h3</h3>
  <p>
    szöveg
  </p>
  <p>
    szöveg
  </p>
</div>
<div class="block">
  <h2 class="header">Cím h2</h2>
  <p>
    szöveg
  </p>
  
  <h3 class="header">Cím h3</h3>
  <p>
    szöveg
  </p>
  <p>
    szöveg
  </p>
</div>

Keressük meg az összes header osztályú elemet, amelyek a block osztályú elemen belül találhatók, és állítsuk be a betűtípust Arial-ra:

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

Amint az a HTML kódban látható, a block osztályú elemen belül a header osztályú elemek lehetnek h2, akár h3 címsorok is. Írjunk szelektorokat, amelyek megkülönböztetik ezeket a címsorokat, és tegyünk valamit ezekkel a címsorokkal.

Válasszuk ki az összes h2-t a header osztállyal, amelyek a block osztályú elemen belül találhatók:

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

Most válasszuk ki az összes h3-t a header osztállyal, amelyek a block osztályú elemen belül találhatók:

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

Gyűjtsük össze a teljes CSS-t:

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

Alkalmazzuk a HTML kódunkra:

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