
Selectors ใช้เลือกวัตถุภาษา HTML ที่เราต้องการใส่ Style โดยสามารถเลือกได้หลายรูปแบบ เช่น จาก ID, Classes, Types, Attributes และอื่นๆอีกมากมาย
The element Selector
เป็น Selector แบบที่เรียกจากชื่อวัตถุนั้นๆ โดยตรง เช่น เราต้องการที่จะเลือก <p> ทั้งหมดในหน้านั้น ดังในตัวอย่าง จะเป็นการทำให้ข้อความใน <p> ทั้งหมดอยู่กึ่งกลางและมีสีแดง
1 2 3 4 |
p { text-align: center; color: red; } |
The id Selector
เป็น Selector แบบที่เรียกจาก id ของวัตถุนั้น โดย id เป็น Attribute ของ HTML Tag ซึ่งจะไม่ซ้ำกันใน 1 หน้าเว็บไซต์
ก่อนที่จะใช้งาน Selector นี้ จำเป็นจะต้องเพิ่ม id ให้วัตถุ HTML ก่อน เช่น
จาก Tag เดิม : <p></p>
เปลี่ยนเป็น : <p id=”para1″></p>
จากนั้นการเรียกใช้ id ใน CSS จะต้องขึ้นต้นด้วยเครื่องหมาย Sharp (#) ใน Selector ก่อนเสมอ
1 2 3 4 |
#para1 { text-align: center; color: red; } |
ห้าม! ตั้งชื่อ id ที่ขึ้นต้นด้วยตัวเลข
The class Selector
จะคล้ายกับ id แต่ Selector นี้จะเรียกจาก class แทน โดยคุณสมบัติของ class ที่ต่างจาก id คือสามารถใช้งานได้หลายวัตถุ และใช้งานได้หลายคลาสในวัตถุเดียวกันอาจจะดูงงๆ เพื่อให้ง่ายต่อการเข้าใจผมได้เขียนอีกบทความนึงเพื่ออธิบายถึงเรื่องนี้โดยเฉพาะ ตามไปดูได้เลยครับที่ลิงค์นี้ xxxxxxxxxxxxxxxxxxxxxxx
ก่อนที่จะใช้งาน Selector นี้ จำเป็นจะต้องเพิ่ม class ให้วัตถุ HTML ก่อน เช่น
จาก Tag เดิม : <p></p>
เปลี่ยนเป็น : <p class=”class1 class2″></p>
จากนั้นการเรียกใช้ class ใน CSS จะต้องขึ้นต้นด้วยเครื่องหมาย Dot (.) ใน Selector ก่อนเสมอ
1 2 3 4 5 6 7 |
.class1 { text-align: center; } .class2 { color: red; } |
ห้าม! ตั้งชื่อ class ที่ขึ้นต้นด้วยตัวเลข
การกำหนด Selector เป็นกลุ่ม
หลายครั้งที่ในไฟล์ CSS จะมีการกำหนดคุณลักษณะที่เหมือนๆกัน ซ้ำๆกัน เช่น
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
h1 { text-align: center; color: red; } h2 { text-align: center; color: red; } p { text-align: center; color: red; } |
เราสามารถใช้เครื่องหมาย Comma (,) เพื่อกำหนดคุณลักษณะทั้งหมดไปได้พร้อมๆกัน ประมาณนี้
1 2 3 4 |
h1, h2, p { text-align: center; color: red; } |
Reference Source – by Chicago Referencing Style
- w3schools.com. 2014. CSS Selectors. http://www.w3schools.com/css/css_selectors.asp (accessed October 7, 2014)