CSS Selectors ใช้สำหรับค้นหาหรือเลือก HTML Element ที่เราต้องการกำหนดสไลต์ เช่น ถ้าต้องการกำหนดสไตล์ให้เอลิเมนต์ p
ซีเล็คเตอร์ก็คือ p
CSS selectors สามารถแยกประเภทได้ 5 ประเภท ดังนี้
- Simple selectors เลือกเอลิเมนต์ด้วยการกำหนดชื่อเอลิเมนต์, คลาส หรือ ไอดี
- Combinator Selectors เลือกเอลิเมนต์ด้วยการกำหนดลำดับความสำพันธ์ เช่น
div p{}
จะหมายถึง เลือกเอลิเมนต์p
ที่ซ้อนอยู่ภายในเอลิเมนต์div
- Pseudo-class selectors เลือกเอลิเมนต์ตามสถานะ เช่น
a:active
หมายถึง เอลิเมนต์a
ที่มีสถานะactive
- Pseudo-elements selectors เลือกกำหนดสไตล์ให้บางส่วนของเอลิเมนต์ เช่น
p::first-line
หมายถึง เลือกกำหนดสไตล์ให้ตัวอักษรแถวแรกในเอลิเมนต์p
- Attribute selectors เลือกเอลิเมนต์ที่มีแอททริบิวต์ตามที่กำหนด เช่น
a[target="_blank"]
หมายถึง เลือกเอลิเมนต์a
ที่แอททริบิวต์tartget
มีค่าเป็น_blank
การกำหนด Selector ด้วยชื่อเอลิเมนต์
การกำหนด selectors พื้นฐานใน CSS เราสามารถกำหนด selector ด้วยการระบุชื่อเอลิเมนต์ได้เลย จะหมายถึงการเลือกเอลิเมนต์นั้น ๆ เช่น
p {
text-align: center;
color: red;
}
จากโค้ดตัวอย่าง หมายถึง เลือกเอลิเมนต์ p
เพื่อกำหนดสไตล์ จัดตัวอักษรอยู่กึ่งกลาง และกำหนดให้สีตัวอักษรเป็นสีแดง
การกำหนด selector ด้วย id
เราสามารถกำหนด selector โดยการระบุไอดีของเอลิเมนต์ เพื่อเป็นการเจาะจงกำหนดสไตล์ให้เอลิเมนต์เพียงตัวเดียวให้เพจนั้น เพราะโดยปกติแล้ว ในแต่ละเพจ เราจะกำหนดไอดีให้กับเอลิเมนต์ไม่ซ้ำกัน
#section1 {
text-align: center;
color: red;
}
การกำหนด selector ด้วย id ให้วางเครื่องหมาย hash #
ไว้ด้านหน้า ตามด้วยค่าของแอททริบิวต์ id เช่น #section1
การกำหนด selector ด้วยคลาส
การกำหนด selector ด้วยคลาส ใช้สำหรับกำหนดสไตล์ให้กับเอลิเมนต์ที่มีชื่อคลาสตามที่เราต้องการ สามารถทำได้โดยวางเครื่องหมาย period (.
) ไว้ด้านหน้า แล้วตามด้วยชื่อคลาส เช่น .address
.address {
text-align: center;
color: red;
}
หรือจะกำหนดด้วยชื่อเอลิเมนต์ ตามด้วย .
และชื่อคลาส ก็ได้เช่นกัน
p.address {
text-align: center;
color: red;
}
เลือกเอลิเมนต์ทั้งหมดในเพจ
เราสามารถเลือกกำหนดสไตล์ให้กับเอลิเมนต์ทั้งหมดในเพจนั้นได้ โดยใช้เครื่องหมาย *
เป็น selector ดังนี้
* {
text-align: center;
color: blue;
}
จากโค้ดด้านบน หมายถึง กำหนดสไตล์ให้กับทุก ๆ เอลิเมนต์ที่อยู่ในหน้าเพจนั้น
การกำหนด selector เป็นกลุ่ม
หากต้องการกำหนดสไตล์ให้เอลิเมนต์หลาย ๆ เอลิเมนต์ด้วยสไตล์ที่เหมือนกัน เราไม่จำเป็นต้องเขียนโค้ดหลายครั้ง เราสามารถกำหนดสไตล์ให้กับเอลิเมนต์ที่ต้องการด้วยการเขียนโค้ดเพียงครั้งเดียว โดยคั่น selector แต่ละตัวด้วยเครื่องหมาอยคอมม่า ,
เช่น p,h1,h2
h1, h2, p {
text-align: center;
color: red;
}
จากโค้ดด้านบน คือการกำหนดสไตล์ให้กับเอลิเมนต์ h1
, h2
และ p
ด้วยสไตล์เดียวกัน โดยไม่ต้องเสียเวลาเขียนแยกกันหลายครั้ง