Universal Selector

หลายๆคนคงสงสัยว่า Universal Selector คืออะไร มันคือเครื่องหมายดอกจันทน์ ที่เราใช้กันใน CSS ครับ (*) ดูตัวอย่างการใช้ * ใน CSS นะครับ


หากเราใช้เครื่องหมาย * ในกรณีนี้จะทำให้ทุก Element ใน Document ของเรามีตัวอักษรสีแดง ดังนั้น เครื่องหมาย * ก็จะหมายถึง ทุก Element ครับ

แต่การใช้งานเครื่องหมายนี้จะมีผลกับ 2 กรณีเท่านั้นครับ คือ


เป็นการใช้เครื่องหมายเดี่ยวๆ อันหมายถึงทุก Element บนเอกสาร กับ


ซึึ่งหมายถึง element span ทุก element บนเอกสาร  เท่านั้น เช่น


ซึ่งจะมีผลทำให้ Element span ทุกอันแสดงตัวอักษรเป็นสีแดง (เนื่องจาก <span>777</span> อยู่ภายใต้ Element body)

แต่มันจะไม่มีผลกับ * ที่ตามด้วย .(class) หรือ #(id) เช่น


ในกรณีนี้ .red จะไม่ถูกแสดงผลครับ

ประโยชน์ของ Universal Selector ยังถูกใช้สำหรับกรณีอื่นๆ ได้ด้วยครับ อันเนื่องมาจากคำสั่งนี้ทำงานกับเฉพาะ Browser มาตรฐานเท่านั้น ดังนั้นเราสามารถใช้มันสำหรับการ Hack CSS ได้ ดังตัวอย่าง


คำสั่งนี้ ถ้าเป็น Browser เข่น IE6 มันจะทำงาน ทำให้ทุก Element span แสดงตัวอักษรสีแดง อันเนื่องมาจาก IE6 ไม่รู้จัก * แต่มันจะทำงานเหมือนกับคำสั่งนี้


ส่วนบน Browser มาตรฐานอื่นๆ ที่มันไม่ทำงานก็เพราะ ว่า โดยปกติแล้ว html จะทำงานก็ต่อเมื่อ html ถูกสืบทอดมาจาก element ใดๆ(จากเครื่องหมาย *) ซึ่งมันเป็นไปไม่ได้ครับ เนื่องจาก tag html จะอยู่นอกสุดของเอกสาร