เปรียบเทียบ 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

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

Back to Top

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

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Back to Top