Descendant selectors ของ CSS

หลายคนอาจจะไม่ค่อยสนใจเท่าไหร่ว่า ลักษณะการเขียน CSS Selector ที่ใช้อยู่นั้นมันเรียกว่าการเขียนแบบไหน รู้แค่เพียงว่ามันใช้ประโยชน์ อย่างไรและเขียนแบบนี้แล้วแสดงผลแบบนั้นเป็นสำคัญ โดยหลักๆ แล้ว Class Selector (.) และ ID Selector (#) มักจะถูกนำมาใช้งานมากและบ่อยที่สุดก็น่าจะว่าได้ แล้ว Selector แบบอื่นที่เราเห็นหละ มันเรียกว่าอย่างไร มีหลักการใช้งานยังไงกันบ้าง

ตอนนี้ผมจะขอยกตัวอย่างการเขียน CSS ในการควบคุมการแสดงผลของ Navigation แล้วขออธิบายเป็นลำดับไปนะครับ โดยในที่นี้อยากจะเน้นไปที่การเขียน CSS แบบ Descendant selectors เป็นหลัก แต่ไม่ได้หมายความว่าผมจะละเลยการอธิบายเรื่องราวการเขียน CSS ในรูปแบบอื่นๆ ไป

Descendant selectors คือการเขียน CSS แบบสืบทอดคุณสมบัติตามแบบฉบับลูกหลานของ Element ใดๆ ที่อยู่ภายใต้ Element หลักที่เราสั่งงาน เช่นตัวอย่างต่อไปนี้จะแสดงถึง h1 ซึ่งเป็น ลูกของ div จะทำงานก็ต่อเมื่อ อยู่ใน div เท่านั้น

ตัวอย่างที่ 1

div h1 {
	color: #ff9900;
}

จะเห็นได้ว่า h1 นั้นแสดงผลออกมาเป็นสี #ff9900 หรือสีส้มนั่นเอง

Descendant สามารถมีได้ทั้งเป็น คลาส และ ไอดี กล่าวคือ เราสามารถกำหนด div ให้มี คลาส หรือไอดีแล้วก็เขียน css แบบ Descendant ตามได้ เช่น

ตัวอย่างที่ 2

div#navigation h1 {
	color: #ff9900;
}

ในกรณีนี้ h1 ในหน้านั้นๆ จะแสดงผลเป็นสีส้มก็ต่อเมื่ออยู่ใน div#navigation เท่านั้น ถือได้ว่าเรามีลักษณะารเขียน CSS ที่เป็น ID Selector เข้ามาผสมผสานอีกแบบ ไม่เพียงแค่ id เท่านั้น เรายังสามารถใช้ คลาส (.) ทดแทนได้ หากไม่ต้องการใช้ ไอดี (#) หากใครยังสงสัยว่าต่างกันยังไง เดี๋ยวผมจะกลับมาเขียนเรื่อง Class Selector และ ID Selector อีกรอบครับ