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

* {
    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 จะอยู่นอกสุดของเอกสาร