CSS Attribute Selectors
จัดรูปแบบองค์ประกอบ HTML ด้วยคุณสมบัติเฉพาะ
เป็นไปได้ที่จะจัดรูปแบบองค์ประกอบ HTML ที่มีคุณลักษณะเฉพาะหรือค่าแอตทริบิวต์
CSS [แอตทริบิวต์] ตัวเลือก
ตัว[attribute]เลือกใช้เพื่อเลือกองค์ประกอบที่มีแอตทริบิวต์ที่ระบุ
ตัวอย่างต่อไปนี้เลือกองค์ประกอบ <a> ทั้งหมดที่มีแอตทริบิวต์เป้าหมาย:
ตัวอย่าง
a[target] {
background-color: yellow;
}
CSS [attribute="value"] ตัวเลือก
ตัว[attribute="value"]เลือกใช้เพื่อเลือกองค์ประกอบที่มีแอตทริบิวต์และค่าที่ระบุ
ตัวอย่างต่อไปนี้เลือกองค์ประกอบ <a> ทั้งหมดที่มีแอตทริบิวต์ target="_blank":
ตัวอย่าง
a[target="_blank"] {
background-color: yellow;
}
CSS [attribute~="value"] ตัวเลือก
ตัว[attribute~="value"]เลือกใช้เพื่อเลือกองค์ประกอบที่มีค่าแอตทริบิวต์ที่มีคำที่ระบุ
ตัวอย่างต่อไปนี้จะเลือกองค์ประกอบทั้งหมดที่มีแอตทริบิวต์ชื่อซึ่งมีรายการคำที่คั่นด้วยช่องว่าง ซึ่งหนึ่งในนั้นคือ "ดอกไม้":
ตัวอย่าง
[title~="flower"] {
border: 5px solid yellow;
}
ตัวอย่างด้านบนจะจับคู่องค์ประกอบที่มี title="flower", title="summer flower" และ title="flower new" แต่ไม่จับคู่ title="my-flower" หรือ title="flowers"
CSS [attribute|="value"] ตัวเลือก
ตัว[attribute|="value"]เลือกใช้เพื่อเลือกองค์ประกอบที่มีแอตทริบิวต์ที่ระบุ ซึ่งค่าสามารถเป็นค่าที่ระบุได้พอดี หรือค่าที่ระบุตามด้วยเครื่องหมายยัติภังค์ (-)
หมายเหตุ:ค่าต้องเป็นทั้งคำ อย่างเดียว เช่น class="top" หรือตามด้วยขีดกลาง ( - ) เช่น class="top-text"
ตัวอย่าง
[class|="top"] {
background: yellow;
}
CSS [attribute^="value"] ตัวเลือก
ตัว[attribute^="value"]เลือกใช้เพื่อเลือกองค์ประกอบที่มีแอตทริบิวต์ที่ระบุซึ่งค่าเริ่มต้นด้วยค่าที่ระบุ
ตัวอย่างต่อไปนี้จะเลือกองค์ประกอบทั้งหมดที่มีค่าแอตทริบิวต์ class ที่ขึ้นต้นด้วย "top":
หมายเหตุ:ค่าไม่จำเป็นต้องเป็นทั้งคำ!
ตัวอย่าง
[class^="top"] {
background: yellow;
}
CSS [attribute$="value"] ตัวเลือก
ตัว[attribute$="value"]เลือกใช้เพื่อเลือกองค์ประกอบที่มีค่าแอตทริบิวต์ลงท้ายด้วยค่าที่ระบุ
ตัวอย่างต่อไปนี้จะเลือกองค์ประกอบทั้งหมดที่มีค่าแอตทริบิวต์คลาสที่ลงท้ายด้วย "test":
หมายเหตุ:ค่าไม่จำเป็นต้องเป็นทั้งคำ!
ตัวอย่าง
[class$="test"] {
background: yellow;
}
CSS [attribute*="value"] ตัวเลือก
ตัว[attribute*="value"]เลือกใช้เพื่อเลือกองค์ประกอบที่มีค่าแอตทริบิวต์ที่มีค่าที่ระบุ
ตัวอย่างต่อไปนี้จะเลือกองค์ประกอบทั้งหมดที่มีค่าแอตทริบิวต์คลาสที่มี "te":
หมายเหตุ:ค่าไม่จำเป็นต้องเป็นทั้งคำ!
ตัวอย่าง
[class*="te"] {
background: yellow;
}
แบบฟอร์มการจัดแต่งทรงผม
ตัวเลือกแอ็ตทริบิวต์มีประโยชน์สำหรับการจัดรูปแบบแบบฟอร์มโดยไม่มีคลาสหรือ ID:
ตัวอย่าง
input[type="text"]
{
width: 150px;
display: block;
margin-bottom: 10px;
background-color: yellow;
}
input[type="button"]
{
width: 120px;
margin-left: 35px;
display: block;
}
เคล็ดลับ:ไป ที่บทช่วย สอนเกี่ยวกับแบบฟอร์ม CSSสำหรับตัวอย่างเพิ่มเติมเกี่ยวกับวิธีการจัดรูปแบบแบบฟอร์มด้วย CSS
ตัวเลือกแอตทริบิวต์ CSS ทั้งหมด
| Selector | Example | Example description |
|---|---|---|
| [attribute] | [target] | Selects all elements with a target attribute |
| [attribute=value] | [target=_blank] | Selects all elements with target="_blank" |
| [attribute~=value] | [title~=flower] | Selects all elements with a title attribute containing the word "flower" |
| [attribute|=value] | [lang|=en] | Selects all elements with a lang attribute value starting with "en" |
| [attribute^=value] | a[href^="https"] | Selects every <a> element whose href attribute value begins with "https" |
| [attribute$=value] | a[href$=".pdf"] | Selects every <a> element whose href attribute value ends with ".pdf" |
| [attribute*=value] | a[href*="w3schools"] | Selects every <a> element whose href attribute value contains the substring "w3schools" |