คู่มืออ้างอิงเลือกเลือน CSS

ตัวเลือก CSS

ตัวเลือก CSS ใช้สำหรับ "หา" (หรือเลือก) องค์ประกอบ HTML ที่คุณต้องการจะกำหนดสไตล์

ใช้เครื่องมือทดสอบตัวเลือก CSS ของเราเพื่อแสดงตัวอย่างต่างๆ ของตัวเลือก

ตัวเลือกง่ายๆ CSS

ตัวเลือกง่ายๆ มีการเลือกองค์ประกอบตามชื่อองค์ประกอบ id และ class นอกจากนี้ยังมีตัวเลือกทั่วไป (*)

เลือกตัว ตัวอย่าง คำอธิบายตัวอย่าง
องค์ประกอบ p เลือกองค์ประกอบ <p>ทั้งหมด
#id #firstname เลือกองค์ประกอบที่มี id="firstname"
* * เลือกองค์ประกอบทั้งหมด
.class .intro เลือกองค์ประกอบที่มี class="intro"

ตัวเลือกคุณสมบัติ CSS

เลือกตัวเลือกที่มีคุณสมบัติที่กำหนด

เลือกตัว ตัวอย่าง คำอธิบายตัวอย่าง
[attribute] [target] เลือกองค์ประกอบที่มีคุณสมบัติ target
[attribute=value] [target=_blank] เลือกองค์ประกอบที่มีคุณสมบัติ target="_blank"
[attribute~=value] [title~=flower] เลือกองค์ประกอบที่คุณสมบัติ title มีคำ "flower"
[attribute|=value] [lang|=en] เลือกองค์ประกอบที่คุณสมบัติ lang เริ่มต้นด้วย "en"
[attribute^=value] a[href^="https"] เลือกแต่ละ <a> องค์ประกอบที่คุณสมบัติ href เริ่มต้นด้วย "https"
[attribute$=value] a[href$=".pdf"] เลือกแต่ละ <a> องค์ประกอบที่คุณสมบัติ src สิ้นสุดด้วย ".pdf"
[attribute*=value] a[href*="codew3c"] เลือกแต่ละ <a> องค์ประกอบที่มีค่าของคุณสมบัติ href ที่มีตัวอักษรย่อย "abc"

CSS ตัวเลือกฝัง

เลือกตัว ตัวอย่าง คำอธิบายตัวอย่าง
& & ปรับรูปแบบสไตล์สำหรับองค์ประกอบในสภาพแวดล้อมขององค์ประกอบอื่น