การรวมกันที่ซับซ้อนของซีเลกเตอร์แบบลูกหลานและคลาสใน CSS

ตอนนี้สมมติว่าเรามีโค้ดต่อไปนี้:

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>

มาหาองค์ประกอบทั้งหมดที่มีคลาส header ซึ่งอยู่ภายในองค์ประกอบที่มีคลาส block และตั้งค่าฟอนต์เป็น Arial:

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

ดังที่เห็นในโค้ด HTML ภายในองค์ประกอบที่มี คลาส block องค์ประกอบที่มีคลาส header อาจเป็นหัวเรื่อง h2 หรือ หัวเรื่อง h3 มาลองเขียน ซีเลกเตอร์ที่แยกความแตกต่างของหัวเรื่องเหล่านี้ และทำบางอย่าง กับหัวเรื่องเหล่านี้กัน

มาเลือก h2 ทั้งหมดที่มีคลาส header ซึ่งอยู่ภายในองค์ประกอบที่มีคลาส block:

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

และตอนนี้มาเลือก h3 ทั้งหมดที่มีคลาส header ซึ่งอยู่ภายในองค์ประกอบ ที่มีคลาส block:

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

มารวบรวม CSS ทั้งหมดของเราเข้าด้วยกัน:

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

ลองนำไปใช้กับโค้ด 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;
}