pseudo-class란 무엇이며 흔한 것은 무엇인가요?

Question

Accepted Answer

**pseudo-class**(콜론 하나 `:`)는 요소의 **상태**나 **위치**를 기준으로 선택합니다 — "호버 중일 때"나 "첫 번째 자식"처럼 일반 클래스로는 표현할 수 없는 것입니다.

## 상태 pseudo-class (상호작용)

```css
a:hover    { color: blue; }      /* 마우스가 위에 있을 때 */
a:focus    { outline: 2px solid; } /* 키보드/탭 포커스 — 접근성을 위해 유지! */
button:active   { transform: scale(0.98); } /* 눌리는 동안 */
button:disabled { opacity: 0.5; } /* 비활성화된 폼 컨트롤 */
input:checked   { } /* 체크된 체크박스/라디오 */
input:focus-visible { } /* 키보드로 탐색할 때만 포커스 (마우스 아님) */
```

링크의 순서는 중요합니다(LVHA): `:link`, `:visited`, `:hover`, `:active`.

## 구조적 pseudo-class (위치)

```css
li:first-child  { } /* 형제 중 첫 번째 li */
li:last-child   { } /* 마지막 것 */
li:nth-child(2) { } /* 두 번째 */
li:nth-child(odd)  { } /* 1, 3, 5번째... — 줄무늬(zebra striping) */
li:nth-child(3n)   { } /* 3개마다 */
p:only-child    { } /* 유일한 자식인 p */
```

`:nth-child()`는 강력합니다 — `2n`(짝수), `2n+1`(홀수), `3n`(3개마다) 등.

## 폼 & 최신 pseudo-class

```css
input:required  { }
input:invalid   { border-color: red; }
:is(h1, h2, h3) { }  /* 무엇이든 매칭 — selector 목록 축약 */
.card:has(img)  { }  /* "부모 selector": img를 포함하는 카드 */
:not(.active)   { }  /* .active를 제외한 모든 것 */
```

## pseudo-class vs pseudo-element

pseudo-class는 콜론 **하나**(`:hover`, *상태*)를, pseudo-element는 콜론 **둘**(`::before`, *생성된 부분*)을 사용합니다. 혼동하지 마세요.

## 왜 중요한가

pseudo-class는 추가 마크업이나 JavaScript 없이 상호작용(hover/focus — 사용 가능하고 접근성 있는 UI에 필수)과 구조(줄무늬, first/last)를 스타일링할 수 있게 합니다.

최신 것들(`:has`, `:is`, `:focus-visible`)은 이전에 JS나 반복적인 selector가 필요했던 문제를 해결합니다.