[CSS3] Attribute Selectors

ใน CSS2 นั้นก็มีตัว Attribute Selectors ให้เราใช้งานอยู่แล้ว ส่วนใน CSS3 นั้นได้เพิ่มเติม Attribute Selectors เข้ามาอีก 3 แบบ ได้แก่

[css]
E[foo^="bar"] // E element ที่ค่า attribute "foo" มีค่าเริ่มต้นด้วย "bar"
E[foo$="bar"] // E element ที่ค่า attribute "foo" มีค่าปิดท้ายด้วย "bar"
E[foo*="bar"] // E element ที่ค่า attribute "foo" มีค่า "bar" อยู่
[/css]

ตัวอย่างการใช้งานนะครับ อย่างเช่น

[css]
img[src$=".png"] { border:5px solid red; }
a[href*="google"] {padding-left:20px;background:url(images/google.png) no-repeat left top; }
[/css]

ตัวอย่างแรกคือ ให้ดูว่ารูปภาพของเราเป็นนามสกุลอะไร ถ้าเป็น png เมื่อไหร่ ให้ตีกรอบรูปด้วยความหนา 5px เป็นเส้นทึบสีแดง

ตัวอย่างที่สองคือ ถ้าเมื่อไหร่ลิงก์ของเรามีคำว่า google อยู่ภายใน attribute “href” ก็ให้ดึงรูปมาโชว์เป็นเหมือน icon ทางด้านซ้ายของคำ

หลักการใช้งานตัว Attribute Selectors คร่าว ๆ ก็ประมาณนี้ครับ