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

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

<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:

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

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

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

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

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

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

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

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

ลองนำไปใช้กับโค้ด HTML ของเรา:

อธิบายว่าซีเลกเตอร์ในโค้ดด้านล่างเลือกอะไร จากนั้นเขียนโค้ด HTML ที่ตรงกับ ซีเลกเตอร์นี้ นี่คือโค้ดที่มีซีเลกเตอร์:

.eee .bbb {
	color: red;
}

.eee h2 {
	color: red;
}

.eee h2.bbb {
	color: red;
}

.eee h3.bbb {
	color: red;
}

.eee p.bbb {
	color: red;
}

.eee .bbb .kkk {
	color: red;
}