Pseudo-class คืออะไร และตัวไหนที่ใช้กันบ่อย?

Question

Accepted Answer

**Pseudo-class** (โคลอนเดี่ยว `:`) เลือกองค์ประกอบโดยอ้างอิงจาก **สถานะ** หรือ **ตำแหน่ง** ของมัน ซึ่งเป็นสิ่งที่ไม่สามารถระบุได้ด้วย class ธรรมดา เช่น "ขณะถูก hover" หรือ "ลูกตัวแรก"

## State pseudo-classes (การโต้ตอบ)

```css
a:hover    { color: blue; }      /* mouse is over it */
a:focus    { outline: 2px solid; } /* keyboard/tab focus — keep for accessibility! */
button:active   { transform: scale(0.98); } /* while being pressed */
button:disabled { opacity: 0.5; } /* disabled form controls */
input:checked   { } /* checked checkbox/radio */
input:focus-visible { } /* focus only when keyboard-navigating (not mouse) */
```

ลำดับสำหรับลิงก์มีความสำคัญ (LVHA): `:link`, `:visited`, `:hover`, `:active`

## Structural pseudo-classes (ตำแหน่ง)

```css
li:first-child  { } /* first li among its siblings */
li:last-child   { } /* last one */
li:nth-child(2) { } /* the 2nd */
li:nth-child(odd)  { } /* 1st, 3rd, 5th... — zebra striping */
li:nth-child(3n)   { } /* every 3rd */
p:only-child    { } /* a p that's the sole child */
```

`:nth-child()` มีความสามารถสูง เช่น `2n` (คู่), `2n+1` (คี่), `3n` (ทุก ๆ ตัวที่สาม) เป็นต้น

## Pseudo-class แบบฟอร์มและแบบสมัยใหม่

```css
input:required  { }
input:invalid   { border-color: red; }
:is(h1, h2, h3) { }  /* matches any — shortens selector lists */
.card:has(img)  { }  /* the "parent selector": a card that CONTAINS an img */
:not(.active)   { }  /* everything except .active */
```

## Pseudo-class กับ pseudo-element ต่างกันอย่างไร

Pseudo-class ใช้โคลอน **หนึ่ง** ตัว (`:hover` ซึ่งเป็น *สถานะ*) ส่วน pseudo-element ใช้ **สอง** ตัว (`::before` ซึ่งเป็น *ส่วนที่ถูกสร้างขึ้น*) อย่าสับสนระหว่างสองสิ่งนี้

## ทำไมจึงสำคัญ

Pseudo-class ช่วยให้คุณจัดสไตล์ให้กับการโต้ตอบ (hover/focus ซึ่งจำเป็นต่อ UI ที่ใช้งานได้และเข้าถึงได้) และโครงสร้าง (การทำแถบสลับสี, ตัวแรก/ตัวสุดท้าย) โดยไม่ต้องเพิ่ม markup หรือ JavaScript

ตัวที่สมัยใหม่ (`:has`, `:is`, `:focus-visible`) แก้ปัญหาที่ก่อนหน้านี้ต้องใช้ JS หรือ selector ที่ซ้ำซ้อน