ตัวเลือก CSS ที่ซับซ้อนพร้อมสถานะของลิงก์

ตัวเลือกที่ซับซ้อนทั้งหมดที่เราเคยศึกษามาก่อนหน้านี้ สามารถนำมาใช้กับลิงก์ได้เช่นกัน

ลองดูตัวอย่าง สมมติว่าลิงก์ของเราอยู่ในบล็อกที่มีการกำหนด id:

<div id="block">
	<a href="#">ลิงก์</a>
	<a href="#">ลิงก์</a>
	<a href="#">ลิงก์</a>
</div>

มากำหนดสไตล์สำหรับลิงก์จากบล็อกนี้:

#block a:link, #block a:visited {
	color: red;
}
#block a:hover {
	text-decoration: none;
}

โดยทั่วไปแล้ว สถานะ link และ visited จะไม่ถูกแยกออกจากกัน ดังนั้นโค้ดสามารถทำให้ง่ายขึ้นได้ดังนี้:

#block a {
	color: red;
}
#block a:hover {
	text-decoration: none;
}

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

#test a {
	color: red;
}
#test a:hover {
	text-decoration: none;
}