3장. 선택자와 상태

type, class, attribute selector를 먼저 익힌다. 컴포넌트 스타일에 id와 긴 descendant selector를 남발하지 않는다. .task, .task[data-state="blocked"], [aria-current="page"]처럼 UI 계약을 드러낸다.

.task { border: 1px solid var(--line); }
.task[data-priority="high"] { border-color: var(--coral); }
button[aria-expanded="true"] .chevron { rotate: 180deg; }

:hover만으로 중요한 정보를 드러내면 키보드와 터치 사용자가 놓친다. :focus-visible, :focus-within, :checked, :disabled, :invalid를 의미에 맞게 쓴다. :has()는 부모·앞선 형제를 상태에 따라 꾸밀 수 있지만 DOM 관계가 곧 계약이므로 범위를 좁힌다.

StudioBoard의 .task:has(.coral)을 DevTools에서 끄고 켜 본다. 시각 강조가 사라져도 텍스트 “높음”이 남는지 확인한다.