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 Sourceby Chicago Referencing Style

 

About The Author

นายนภดล แข็งการนา

นักวิชาการคอมพิวเตอร์ - กลุ่มงานพัฒนาระบบสารสนเทศ
สำนักวิทยบริการและเทคโนโลยีสารสนเทศ
มหาวิทยาลัยราชภัฏนครสวรรค์

Leave Comment