CSS Selectors การกำหนดซีเล็คเตอร์ใน CSS

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 ด้วยสไตล์เดียวกัน โดยไม่ต้องเสียเวลาเขียนแยกกันหลายครั้ง