요소의 상태나 구조적 위치를 선택합니다.
:hover, :focus-visible, :checked는 사용자 상태를, :first-child와 :nth-child는 구조적 위치를 선택합니다. 클래스 추가 없이 현재 상태를 꾸밀 수 있습니다.
버튼은 실습 기본 스타일의 초록 배경을 쓰다가 마우스가 올라오면 .target:hover가 배경만 갈색으로 바꿉니다. Tab으로 이동해 오면 :focus-visible 규칙이 노란 외곽선을 3px 띄워 두르고, 체크박스를 선택하면 input:checked가 걸려 accent-color로 체크 표시 상자를 초록색으로 칠합니다.
부모에 :focus-within을 쓰면 안쪽 요소 하나에 포커스가 있을 때 부모 전체를 꾸밀 수 있습니다. label:focus-within처럼 쓰면 체크박스로 Tab 이동했을 때 완료라는 글자까지 함께 강조돼, 작은 체크박스만 보고 위치를 찾지 않아도 됩니다.
hover 상태만 만들면 터치와 키보드 환경에서 같은 피드백을 받을 수 없습니다.
직접 바꿔보세요focus-visible과 checked 상태를 직접 확인하세요.