selector คืออะไร เป็นแบบไหน

select มันคือตัวที่ใช้บ่งบอกว่าเราว่าเราจะใช้ รูปแบบ หรือ style ที่เรากำหนดที่จุดใด เช่น ถ้าคุณต้องการกำหนดรูปแบบให้ p element เป็น font TIMES ขนาด 12 pixel คุณจะต้องสร้าง selector ให้กับ p element เพียงเท่านั้น แต่ถ้าหากว่าต้องการกำหนด รูปแบบ ให้กับ p อันแรกของ division เพียงอันเดียวเราก็ต้องเขียน selector ให้ผสมกันมากขึ้น เพื่อที่จะใช้ในการบ่งบอกว่า เราต้องการให้มีผลต่อเฉพาะใน p อันแรกของ division เท่านั้น

selector สามารถกำหนดให้เป็นได้ 5 รูปแบบตามที่เราต้องการเลือกใช้ โดยจะมีดังต่อไปนี้
1.ในแบบ ชื่อ หรือชนิดของ element
h1 {color: red;}
สิ่งเพิ่มเติมที่ 9.1? รูปแบบอย่างง่ายที่สุดคือการใส่ชื่อ หรือชนิดของ element ที่เราต้องการให้มีผล เช่นตัวอย่างนี้ เราต้องการให้มีผลต่อ h1 element นั่นเอง

2.ในแบบการบรรยาย
h1 em {color: red;}
สิ่งเพิ่มเติมที่ 9.2 selector ตัวนี้เป็นแบบการบรรยาย โดยที่ style จะถูกกำหนดถ้ามี em element ที่อยู่ใน h1 element โดยที่ em ที่อยู่ที่อื่นใดก็ตามที่ไม่ใช่ h1 จะไม่มีผล (กรณี em เป็น child ของ h1 นั่นเอง)

3.ในแบบ class หรือ id element
em.very {color: red;}
div#gaudi {color: red;}
สิ่งเพิ่มเติมที่ 9.3 selector แรกจะมีผลต่อทุกๆ em element ที่ประกอบด้วย very class และ selector อันที่สอง กำหนดเฉพาะ div element ที่มี id คือ gaudi เท่านั้น

4.ในแบบ pseudo-class ของ element หรือ pseudo-element ที่ตัวมันเอง (เรื่องของ pseudo-class จะอธิบายในภายหลังอีกทีครับ)
a:link {color: red;}
สิ่งเพิ่มเติมที่ 9.4 ในตัวอย่างนี้ selector เลือกใช้ a element เพื่อสร้าง link pseudo-class (จากคำสั่งหมายถึง มีผลเฉพาะลิ้งค์ที่ยังไม่เคยถูกกดนั่นเอง)

5.ในแบบที่ไม่ระบุเจาะจง หรือ element ที่มี attributes และ value
a[name] {color: red;}
สิ่งเพิ่มเติมที่ 9.5 สามารถใช้เครื่องหมาย วงเล็บใหญ่ [ ] ในการเพิ่มเติมค่าของ selector เพื่อกำหนดค่าของ attribute ของ element หรือ value

selector นั้นสามารถผสมรูปแบบเข้าด้วยกันได้ โดยเรียงตามลำดับความสัคัญตามบรรทัดที่เขียน หรือที่เรียกใช้งาน แต่โดยส่วนใหญ่แล้ว เราจะเลือกใช้แค่ 1 หรือ 2 แบบเท่านั้น และเรายังสามารถกำหนด selector ให้แตกต่างกันได้ด้วย โดยให้มีรูปแบบที่เหมือนกัน แม้ว่า selector จะอยู่คนละ group ก็ตาม

No comments yet.
You must be logged in to post a comment.