Tag: selector

  • [CSS3] Attribute Selectors

    [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 คร่าว ๆ ก็ประมาณนี้ครับ