ตัวเลือก CSS
ตัวเลือก CSS จะเลือกองค์ประกอบ HTML ที่คุณต้องการจัดรูปแบบ
ตัวเลือก CSS
ตัวเลือก CSS ใช้เพื่อ "ค้นหา" (หรือเลือก) องค์ประกอบ HTML ที่คุณต้องการจัดรูปแบบ
เราสามารถแบ่งตัวเลือก CSS ออกเป็นห้าประเภท:
- ตัวเลือกอย่างง่าย (เลือกองค์ประกอบตามชื่อ, รหัส, คลาส)
- ตัวเลือกตัวผสม (เลือกองค์ประกอบตามความสัมพันธ์เฉพาะระหว่างพวกเขา)
- ตัวเลือกคลาสหลอก (เลือกองค์ประกอบตามสถานะที่แน่นอน)
- ตัวเลือกองค์ประกอบหลอก (เลือกและจัดรูปแบบส่วนหนึ่งขององค์ประกอบ)
- ตัวเลือกแอตทริบิวต์ (เลือกองค์ประกอบตามแอตทริบิวต์หรือค่าแอตทริบิวต์)
หน้านี้จะอธิบายตัวเลือก CSS พื้นฐานที่สุด
ตัวเลือกองค์ประกอบ CSS
ตัวเลือกองค์ประกอบจะเลือกองค์ประกอบ HTML ตามชื่อองค์ประกอบ
ตัวอย่าง
ที่นี่ <p> องค์ประกอบทั้งหมดบนหน้าจะถูกจัดกึ่งกลางด้วยสีข้อความสีแดง:
p
{
text-align: center;
color: red;
}
ตัวเลือก CSS id
ตัวเลือก id ใช้แอตทริบิวต์ id ขององค์ประกอบ HTML เพื่อเลือกองค์ประกอบเฉพาะ
รหัสขององค์ประกอบนั้นไม่ซ้ำกันภายในหน้า ดังนั้นตัวเลือกรหัสจึงถูกใช้เพื่อเลือกองค์ประกอบที่ไม่ซ้ำกันหนึ่งรายการ!
ในการเลือกองค์ประกอบที่มีรหัสเฉพาะ ให้เขียนอักขระแฮช (#) ตามด้วยรหัสขององค์ประกอบ
ตัวอย่าง
กฎ CSS ด้านล่างจะนำไปใช้กับองค์ประกอบ HTML ที่มี id="para1":
#para1
{
text-align: center;
color: red;
}
หมายเหตุ:ชื่อรหัสไม่สามารถขึ้นต้นด้วยตัวเลขได้!
ตัวเลือกคลาส CSS
ตัวเลือกคลาสจะเลือกองค์ประกอบ HTML ที่มีแอตทริบิวต์คลาสเฉพาะ
ในการเลือกองค์ประกอบที่มีคลาสเฉพาะ ให้เขียนอักขระจุด (.) ตามด้วยชื่อคลาส
ตัวอย่าง
ในตัวอย่างนี้องค์ประกอบ HTML ทั้งหมดที่มี class="center" จะเป็นสีแดงและจัดกึ่งกลาง:
.center {
text-align: center;
color: red;
}
คุณยังสามารถระบุได้ว่าคลาสควรได้รับผลกระทบจากองค์ประกอบ HTML ที่เฉพาะเจาะจงเท่านั้น
ตัวอย่าง
ในตัวอย่างนี้ <p> องค์ประกอบที่มี class="center" เท่านั้นที่จะเป็นสีแดงและจัดกึ่งกลาง:
p.center {
text-align: center;
color: red;
}
องค์ประกอบ HTML ยังสามารถอ้างถึงมากกว่าหนึ่งคลาส
ตัวอย่าง
ในตัวอย่างนี้ <p> องค์ประกอบจะถูกจัดรูปแบบตาม class="center" และ class="large":
<p class="center large">This paragraph refers to two classes.</p>
หมายเหตุ:ชื่อคลาสต้องไม่ขึ้นต้นด้วยตัวเลข!
ตัวเลือกสากล CSS
ตัวเลือกสากล (*) เลือกองค์ประกอบ HTML ทั้งหมดบนหน้า
ตัวอย่าง
กฎ CSS ด้านล่างจะมีผลกับทุกองค์ประกอบ HTML บนหน้า:
*
{
text-align: center;
color: blue;
}
ตัวเลือกการจัดกลุ่ม CSS
ตัวเลือกการจัดกลุ่มจะเลือกองค์ประกอบ HTML ทั้งหมดที่มีคำจำกัดความของรูปแบบเดียวกัน
ดูโค้ด CSS ต่อไปนี้ (องค์ประกอบ h1, h2 และ p มีการกำหนดรูปแบบเหมือนกัน):
h1
{
text-align: center;
color: red;
}
h2
{
text-align: center;
color: red;
}
p
{
text-align: center;
color: red;
}จะดีกว่าหากจัดกลุ่มตัวเลือก เพื่อลดขนาดโค้ด
หากต้องการจัดกลุ่มตัวเลือก ให้คั่นแต่ละตัวเลือกด้วยเครื่องหมายจุลภาค
ตัวอย่าง
ในตัวอย่างนี้ เราได้จัดกลุ่มตัวเลือกจากโค้ดด้านบน:
h1, h2, p
{
text-align: center;
color: red;
}
CSS Simple Selectors ทั้งหมด
| Selector | Example | Example description |
|---|---|---|
| #id | #firstname | Selects the element with id="firstname" |
| .class | .intro | Selects all elements with class="intro" |
| element.class | p.intro | Selects only <p> elements with class="intro" |
| * | * | Selects all elements |
| element | p | Selects all <p> elements |
| element,element,.. | div, p | Selects all <div> elements and all <p> elements |