CSS Attribute Selector: เลือก元素ด้วย Attribute แบบครบถ้วน

CSS selectors ให้ developer จัดสไตล์元素เฉพาะบนเว็บเพจ ต้องการเลือก元素ที่มี attribute เฉพาะ? ใช้ CSS attribute selector

บทช่วยสอนนี้อธิบายการใช้ attribute selector จนเป็น expert

HTML Attributes

Attributes กำหนดคุณสมบัติเพิ่มเติมของ元素 เช่น height ของรูป, title ของ元素 เขียนแบบ name/value pair: name="value"

CSS Attribute Selector

2 ขั้นตอน: 1) หุ้มชื่อ attribute ด้วยวงเล็บเหลี่ยม [] 2) ระบุสไตล์ที่ต้องการ

รูปแบบ Attribute Selectors ทั้ง 7 แบบ

1. [attribute] — มี attribute นี้อยู่

[title] { font-size: 16px; }

ใช้กับ元素ทุกตัวที่มี title attribute ไม่สนค่า

2. element[attribute] — 元素เฉพาะที่มี attribute

p[title] { font-size: 16px; }

ใช้กับ <p> ที่มี title attribute เท่านั้น

3. [attribute="value"] — ค่า attribute เท่ากับ value

a[href="careerkarma.com"] { background-color: orange; }

เลือก <a> ที่ href เท่ากับ "careerkarma.com" ตรงตัว

4. [attribute~="value"] — attribute value มีคำว่า value (คั่นด้วย space)

p[title~="blue"] { color: blue; }

title มีคำว่า "blue" แยกต่างหาก (เช่น "blue color", "color blue") แต่ไม่รวม "blueColor"

5. [attribute|="value"] — attribute เริ่มต้นด้วย value ตามด้วย hyphen

div[class|="top"] { padding-top: 10px; }

class เริ่มต้น "top" หรือ "top-..." (เช่น "top-style") แต่ไม่รวม "topstyle"

6. [attribute^="value"] — attribute เริ่มต้นด้วย value (ไม่ต้องเป็นคำเต็ม)

div[class^="paddingBottom"] { padding-bottom: 10px; }

class เริ่มต้น "paddingBottom" (เช่น "paddingBottomStyle", "paddingBottom-element")

7. [attribute$="value"] — attribute ลงท้ายด้วย value

a[href$=".app"] { color: gray; }

href ลงท้าย ".app"

8. [attribute*="value"] — attribute มี value อยู่ที่ไหนก็ได้ (substring)

div[class*="allPadding"] { padding: 50px; }

class มี "allPadding" อยู่ไหนก็ได้ (ต่างจาก ~= ที่ต้องเป็นคำแยกต่างหาก)

สรุป

CSS attribute selector เลือก元素จาก attribute values ได้ 8 รูปแบบ: มี attribute, ค่าเท่ากับ, มีคำ, เริ่มต้นด้วย, ลงท้ายด้วย, มี substring — ใช้จัดสไตล์เฉพาะเจาะจงได้แม่นยำ