Universal Selector
* {
color:red;
}
หากเราใช้เครื่องหมาย * ในกรณีนี้จะทำให้ทุก Element ใน Document ของเรามีตัวอักษรสีแดง ดังนั้น เครื่องหมาย * ก็จะหมายถึง ทุก Element ครับ
แต่การใช้งานเครื่องหมายนี้จะมีผลกับ 2 กรณีเท่านั้นครับ คือ
* {
color:red;
}
เป็นการใช้เครื่องหมายเดี่ยวๆ อันหมายถึงทุก Element บนเอกสาร กับ
* span {
color:red;
}
ซึึ่งหมายถึง element span ทุก element บนเอกสาร เท่านั้น เช่น
<p>555<span>666</span></p>
<span>777</span>
ซึ่งจะมีผลทำให้ Element span ทุกอันแสดงตัวอักษรเป็นสีแดง (เนื่องจาก <span>777</span> อยู่ภายใต้ Element body)
แต่มันจะไม่มีผลกับ * ที่ตามด้วย .(class) หรือ #(id) เช่น
* .red {
color:red;
}
ในกรณีนี้ .red จะไม่ถูกแสดงผลครับ
ประโยชน์ของ Universal Selector ยังถูกใช้สำหรับกรณีอื่นๆ ได้ด้วยครับ อันเนื่องมาจากคำสั่งนี้ทำงานกับเฉพาะ Browser มาตรฐานเท่านั้น ดังนั้นเราสามารถใช้มันสำหรับการ Hack CSS ได้ ดังตัวอย่าง
* html span {
color:red;
}
คำสั่งนี้ ถ้าเป็น Browser เข่น IE6 มันจะทำงาน ทำให้ทุก Element span แสดงตัวอักษรสีแดง อันเนื่องมาจาก IE6 ไม่รู้จัก * แต่มันจะทำงานเหมือนกับคำสั่งนี้
html span {
color:red;
}
ส่วนบน Browser มาตรฐานอื่นๆ ที่มันไม่ทำงานก็เพราะ ว่า โดยปกติแล้ว html จะทำงานก็ต่อเมื่อ html ถูกสืบทอดมาจาก element ใดๆ(จากเครื่องหมาย *) ซึ่งมันเป็นไปไม่ได้ครับ เนื่องจาก tag html จะอยู่นอกสุดของเอกสาร