CSS Selectors

Selectors ใช้เลือกวัตถุภาษา HTML ที่เราต้องการใส่ Style โดยสามารถเลือกได้หลายรูปแบบ เช่น จาก ID, Classes, Types, Attributes และอื่นๆอีกมากมาย

The element Selector
เป็น Selector แบบที่เรียกจากชื่อวัตถุนั้นๆ โดยตรง เช่น เราต้องการที่จะเลือก <p> ทั้งหมดในหน้านั้น ดังในตัวอย่าง จะเป็นการทำให้ข้อความใน <p> ทั้งหมดอยู่กึ่งกลางและมีสีแดง

The id Selector
เป็น Selector แบบที่เรียกจาก id ของวัตถุนั้น โดย id เป็น Attribute ของ HTML Tag ซึ่งจะไม่ซ้ำกันใน 1 หน้าเว็บไซต์

ก่อนที่จะใช้งาน Selector นี้ จำเป็นจะต้องเพิ่ม id ให้วัตถุ HTML ก่อน เช่น
จาก Tag เดิม : <p></p>
เปลี่ยนเป็น : <p id=”para1″></p>
จากนั้นการเรียกใช้ id ใน CSS จะต้องขึ้นต้นด้วยเครื่องหมาย Sharp (#) ใน Selector ก่อนเสมอ

ห้าม! ตั้งชื่อ 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 ก่อนเสมอ

ห้าม! ตั้งชื่อ class ที่ขึ้นต้นด้วยตัวเลข

การกำหนด Selector เป็นกลุ่ม
หลายครั้งที่ในไฟล์ CSS จะมีการกำหนดคุณลักษณะที่เหมือนๆกัน ซ้ำๆกัน เช่น

เราสามารถใช้เครื่องหมาย Comma (,) เพื่อกำหนดคุณลักษณะทั้งหมดไปได้พร้อมๆกัน ประมาณนี้

 

Reference Source – by Chicago Referencing Style

• w3schools.com. 2014. CSS Selectors. http://www.w3schools.com/css/css_selectors.asp (accessed October 7, 2014)