CSS Modules

เปรียบเทียบ Selectors ของ CSS2 และ CSS3

css2 และ css3 มีรูปแบบการใช้งาน selectors เพิ่มมากยิ่งขึ้นและแตกต่างกันออกไป มาดูกันว่า css3 มี selectors เพิ่มมา มากน้อยเท่าใด และเราจะเตรียมตัวนำไปใช้ได้อย่างไรกันบ้าง

เราจะเตรียมตัว ต้อนรับการมาถึงของ IE8 กันอย่างไรให้สมศักดิ์ศรี ถึงแม้ว่า ต้นมีนาคมนี้ ความไม่แน่นอน ยังคงมีอยู่สูงว่า จริงๆ แล้วเบต้า จะออกมาให้เราลองใช้กันทันหรือไม่ 5 มีนาเราคงเห็นคำตอบกัน แต่เรานั่งพิจารณาดูกันให้ถี่ถ้วนกันอีกสักนิดว่า เราจะนำ Selectors ทั้งสองเวอร์ชั่นเหล่านี้ มาใช้งานให้คุ้มกันอย่างไรบ้าง

ปัจจุบัน Selectors รูปแบบหลักๆ ที่เราใช้กันบ่อยมาก ก็คงจะมี

Descendant selectors ของ CSS

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

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

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

Back to Top