Fundamentals

Combination Selector คืออะไร

Selector พื้นฐาน เช่น element, class, id เลือก element ได้ทีละตัว แต่ในหน้าเว็บจริง เราต้องการ style ที่ขึ้นอยู่กับ "ความสัมพันธ์" ระหว่าง element เช่น "เฉพาะ <p> ที่อยู่ข้างใน <article>" หรือ "เฉพาะ <li> ที่เป็นลูกโดยตรงของ <ul>" Combination Selector (หรือ Combinator) ช่วยให้เราเขียน selector ที่อ้างอิงโครงสร้าง HTML ได้อย่างแม่นยำ โดยใช้สัญลักษณ์พิเศษระหว่าง selector สองตัว

• Descendant ( ) — เลือก element ที่อยู่ภายใน ancestor ใด ๆ
• Child (>) — เลือก element ที่เป็นลูกโดยตรงเท่านั้น
• Adjacent Sibling (+) — เลือก element พี่น้องตัวถัดไปทันที
• General Sibling (~) — เลือก element พี่น้องทุกตัวที่ตามมา

Descendant Selector — ช่องว่าง ( )

Descendant Selector ใช้ "ช่องว่าง" ระหว่าง selector สองตัว ความหมายคือ "เลือก B ที่อยู่ภายใน A ในระดับใด ๆ ก็ได้" ไม่จำเป็นต้องเป็นลูกโดยตรง รูปแบบ: A B → เลือก B ทุกตัวที่อยู่ใน A

/* เลือก <p> ทุกตัวที่อยู่ภายใน <article> */
article p {
  color: #374151;
  line-height: 1.8;
}

/* เลือก <a> ทุกตัวที่อยู่ใน .nav */
.nav a {
  text-decoration: none;
  color: #2563eb;
}

Child Selector — เครื่องหมาย >

Child Selector ใช้ > ระหว่าง selector สองตัว ความหมายคือ "เลือก B ที่เป็นลูกโดยตรง (direct child) ของ A เท่านั้น" ต่างจาก Descendant Selector ตรงที่ไม่เลือก element ที่ซ้อนลึกลงไปอีก รูปแบบ: A > B → เลือก B ที่เป็นลูกชั้นแรกของ A เท่านั้น

/* เลือกเฉพาะ <li> ที่เป็นลูกโดยตรงของ <ul> */
ul > li {
  list-style: disc;
  color: #111827;
}

/* <li> ที่ซ้อนอยู่ใน <ul> ชั้นใน จะไม่ถูก style นี้ */

Adjacent Sibling Selector — เครื่องหมาย +

Adjacent Sibling Selector ใช้ + ระหว่าง selector สองตัว ความหมายคือ "เลือก B ที่อยู่ถัดจาก A ทันที และอยู่ใน parent เดียวกัน" B ต้องอยู่ติดกับ A โดยไม่มี element อื่นคั่น รูปแบบ: A + B → เลือก B ตัวแรกที่ตามหลัง A ทันที

/* ย่อหน้าแรกหลัง h2 จะมี style พิเศษ */
h2 + p {
  font-size: 1.05rem;
  color: #374151;
  margin-top: 0.25rem;
}

/* input ถัดจาก label ทันที */
label + input {
  margin-left: 8px;
  border: 1px solid #6b7280;
}

General Sibling Selector — เครื่องหมาย ~

General Sibling Selector ใช้ ~ ระหว่าง selector สองตัว ความหมายคือ "เลือก B ทุกตัวที่ตามหลัง A และอยู่ใน parent เดียวกัน" ต่างจาก + ตรงที่เลือกพี่น้องทุกตัวที่ตามมา ไม่ใช่แค่ตัวแรก รูปแบบ: A ~ B → เลือก B ทุกตัวที่ตามหลัง A ใน parent เดียวกัน

/* ทุก <p> ที่ตามหลัง h2 ใน parent เดียวกัน */
h2 ~ p {
  color: #6b7280;
}

/* ตัวอย่าง: ใช้กับ checkbox state */
input[type="checkbox"]:checked ~ .content {
  display: block;
}

Attribute Selector — วงเล็บเหลี่ยม [ ]

Attribute Selector เลือก element ตามค่า attribute ของ HTML ใช้วงเล็บเหลี่ยม [ ] ครอบชื่อ attribute มีหลายรูปแบบ: [attr] — มี attribute นี้อยู่ (ไม่สนค่า) [attr="val"] — ค่าตรงทั้งหมด [attr^="val"] — ค่าขึ้นต้นด้วย val [attr$="val"] — ค่าลงท้ายด้วย val [attr*="val"] — ค่ามี val อยู่ในนั้น

/* เลือก input ทุกตัวที่มี type="text" */
input[type="text"] {
  border: 1px solid #d1d5db;
  border-radius: 4px;
  padding: 6px 10px;
}

/* เลือก link ที่เปิดหน้าต่างใหม่ */
a[target="_blank"] {
  color: #dc2626;
}
a[target="_blank"]::after {
  content: " ↗";
}

/* เลือก img ที่ src ลงท้ายด้วย .png */
img[src$=".png"] {
  border: 2px solid #e5e7eb;
}

เปรียบเทียบ Combinator ทั้งหมด

สรุปท้ายบท

• ช่องว่าง ( ) เลือก descendant ทุกระดับ — ใช้บ่อยที่สุด
• > เลือกเฉพาะ direct child — ป้องกัน style หลุดไปชั้นลึก
• + เลือก sibling ตัวถัดไปทันที — ดีสำหรับ intro paragraph
• ~ เลือก sibling ทุกตัวที่ตามมา — ใช้กับ CSS-only toggle
• [ ] เลือกตาม attribute — แม่นยำกับ form elements
• รวม combinator หลายชั้นได้ เช่น nav > ul > li a

Lab 1: Article Reading Map

เป้าหมาย: ฝึกเลือก element ตามความสัมพันธ์ในบทความด้วย descendant selector และ child selector โจทย์: 1. ใช้ .article p เพื่อให้ย่อหน้าทุกตัวที่อยู่ใน .article มี color: #374151 2. ใช้ .toc > li เพื่อให้เฉพาะรายการชั้นแรกของสารบัญมี font-weight: bold

Lab 2: Sibling Feedback Panel

เป้าหมาย: ฝึกใช้ sibling selector เพื่อเลือก element ที่อยู่ต่อจาก element สำคัญใน parent เดียวกัน โจทย์: 1. ใช้ .notice + p เพื่อให้ย่อหน้าแรกที่อยู่ถัดจาก .notice ทันทีมี color: #1d4ed8 2. ใช้ .notice ~ .hint เพื่อให้ .hint ทุกตัวที่ตามหลัง .notice มี background-color: #eff6ff