Kombinimet komplekse të selektorit të pasardhësve dhe klasave në CSS

Le të themi se tani kemi kodin e mëposhtëm:

html<div class="block">
  <h2 class="header">Title h2</h2>
  <p>
    text
  </p>
  
  <h3 class="header">Title h3</h3>
  <p>
    text
  </p>
  <p>
    text
  </p>
</div>
<div class="block">
  <h2 class="header">Title h2</h2>
  <p>
    text
  </p>
  
  <h3 class="header">Title h3</h3>
  <p>
    text
  </p>
  <p>
    text
  </p>
</div>

Le të gjejmë të gjithë elementet me klasën header, që ndodhen brenda elementit me klasën block, dhe t'u caktojmë fontin Arial:

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

Siç shihet në kodin HTML, brenda elementit me klasën block elementet me klasën header mund të jenë ose tituj h2, ose tituj h3. Le të shkruajmë selektorë që i dallojnë këto tituj, dhe të bëjmë diçka me këta tituj.

Le të zgjedhim të gjithë h2 me klasën header, që ndodhen brenda elementit me klasën block:

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

Dhe tani le të zgjedhim të gjithë h3 me klasën header, që ndodhen brenda elementit me klasën block:

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

Le të mbledhim të gjithë CSS-në tonë së bashku:

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

Le ta aplikojmë atë në kodin tonë HTML:

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