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

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

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

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

1. E
2. E:link
3. E:visited
4. E:active
5. E:hover
6. DIV.warning
7. E#myid
8. * พบเจอได้น้อย
9. E F พบเจอได้น้อย

โดยในความเป็นจริงแล้ว ปัจจุบันสำหรับ Modern Browsers ทั่วไป CSS Selectors Version 2 สามารถใช้ได้ทั้งหมด

CSS2 Selectors

1. *
2. E
3. E F
4. E > F
5. E:first-child

6. E:link

   E:visited

   1. E:active
   2. E:hover
   3. E:focus
7. E:lang(c)
8. E + F
9. E[foo]
10. E[foo="warning"]
11. E[foo~="warning"]
12. E[lang|="en"]
13. DIV.warning
14. E#myid

CSS3 Selectors

1. *
2. E
3. E[foo]
4. E[foo="bar"]
5. E[foo~="bar"]
6. E[foo^="bar"]
7. E[foo$="bar"]
8. E[foo*="bar"]
9. E[hreflang|="en"]
10. E:root
11. E:nth-child(n)
12. E:nth-last-child(n)
13. E:nth-of-type(n)
14. E:nth-last-of-type(n)
15. E:first-child
16. E:last-child
17. E:first-of-type
18. E:last-of-type
19. E:only-child
20. E:only-of-type
21. E:empty

22. E:link

    E:visited

    1. E:active
    2. E:hover
    3. E:focus
23. E:target
24. E:lang(fr)
25. E:enabled
26. E:disabled
27. E:checked
28. E::first-line
29. E::first-letter
30. E::selection
31. E::before
32. E::after
33. E.warning
34. E#myid
35. E:not(s)
36. E F
37. E > F
38. E + F
39. E ~ F

ดูกันให้น้ำลายไหลไปก่อน นะครับ เดี๋ยวเราค่อยมานั่งไล่กันไปทีละตัว