การใช้งาน CSS Selector

CSS Selectors คือวิธีการที่ใช้ในการระบุหรือเลือกองค์ประกอบ (element) บนหน้าเว็บเพื่อที่จะทำการกำหนดสไตล์ให้กับองค์ประกอบนั้น ๆ ใน CSS เราสามารถใช้ selectors ได้หลากหลายรูปแบบเพื่อเลือกองค์ประกอบตามชื่อแท็ก, class, id, ลักษณะความสัมพันธ์ และสถานะต่าง ๆ ขององค์ประกอบ

Type Selector

เลือกองค์ประกอบโดยใช้ชื่อแท็ก (tag name)

p {
  color: blue;
}

ตัวอย่างนี้จะทำให้ข้อความใน <p> ทุกตัวในหน้าเว็บมีสีฟ้า

Class Selector

เลือกองค์ประกอบที่มีการกำหนด class ใด class หนึ่ง

.button {
  background-color: green;
}

จะเลือกองค์ประกอบที่มี class="button" และให้มีพื้นหลังสีเขียว

ID Selector

เลือกองค์ประกอบที่มี id เฉพาะเจาะจง

#header {
  background-color: yellow;
}

จะเลือกองค์ประกอบที่มี id="header" และกำหนดพื้นหลังเป็นสีเหลือง

Universal Selector

เลือกองค์ประกอบทุกตัวบนหน้าเว็บ

* {
  margin: 0;
  padding: 0;
}

จะรีเซ็ต margin และ padding ขององค์ประกอบทุกตัวให้เป็น 0

Attribute Selector

เลือกองค์ประกอบที่มีแอตทริบิวต์เฉพาะ เช่น type, href, หรือ src

input[type="text"] {
  border: 1px solid black;
}

จะเลือก <input> ที่มี type="text" และกำหนดเส้นขอบสีดำ

Descendant Selector

เลือกองค์ประกอบลูกที่อยู่ภายใต้องค์ประกอบแม่

div p {
  color: red;
}

จะเลือก <p> ที่อยู่ภายใน <div> และกำหนดข้อความเป็นสีแดง

Child Selector

เลือกองค์ประกอบลูกที่อยู่ในระดับถัดจากองค์ประกอบแม่โดยตรง

div > p {
  font-weight: bold;
}

จะเลือก <p> ที่เป็นลูกตรงของ <div> และทำให้ข้อความตัวหนา

Adjacent Sibling Selector

เลือกองค์ประกอบที่อยู่ถัดจากพี่น้องที่เป็น sibling ของมัน

h1 + p {
  font-style: italic;
}

จะเลือก <p> ที่อยู่ถัดจาก <h1> และกำหนดข้อความเป็นตัวเอียง

General Sibling Selector

เลือกองค์ประกอบพี่น้องทั้งหมดที่ตามหลังองค์ประกอบที่ระบุ

h1 ~ p {
  color: green;
}

จะเลือก <p> ทุกตัวที่ตามหลัง <h1> และเปลี่ยนข้อความเป็นสีเขียว

Pseudo-classes

ใช้เลือกองค์ประกอบตามสถานะหรือเงื่อนไขพิเศษ เช่น hover, focus, nth-child

a:hover {
  color: red;
}

จะเปลี่ยนสีลิงก์เป็นสีแดงเมื่อผู้ใช้เอาเมาส์ไปวางบนลิงก์

Pseudo-elements

ใช้เลือกส่วนขององค์ประกอบ เช่น เลือกตัวอักษรตัวแรก, บรรทัดแรก หรือใส่คอนเทนต์เข้าไป

p::first-letter {
  font-size: 2em;
}

จะทำให้ตัวอักษรตัวแรกของ <p> ใหญ่ขึ้น 2 เท่า

Group Selector

สามารถเลือกองค์ประกอบหลายตัวพร้อมกันโดยใช้เครื่องหมายคอมมา (,)

h1, h2, h3 {
  font-family: Arial, sans-serif;
}

จะเลือก <h1>, <h2>, และ <h3> และกำหนดฟอนต์เป็น Arial

การใช้ CSS Selectors อย่างถูกต้องและเหมาะสมจะช่วยให้การออกแบบหน้าเว็บทำได้อย่างง่ายและมีประสิทธิภาพมากขึ้น