요소의 상태나 구조적 위치를 선택합니다.
:hover, :focus-visible, :checked는 사용자 상태를, :first-child와 :nth-child는 구조적 위치를 선택합니다. 클래스 추가 없이 현재 상태를 꾸밀 수 있습니다.
이번 예제의 출발점은 button:hover { ... } li:nth-child(2) { ... }입니다. 선택자가 고른 요소와 실제로 계산된 값을 개발자 도구에서 나란히 보면 선언이 적용되지 않은 이유를 빠르게 찾을 수 있습니다.
처음에는 예제를 그대로 확인한 다음 focus-visible과 checked 상태를 직접 확인하세요. 한 번에 한 값만 바꾸고 좁은 화면, 키보드 포커스와 200% 확대에서도 내용이 사라지지 않는지 확인하세요.
hover 상태만 만들면 터치와 키보드 환경에서 같은 피드백을 받을 수 없습니다.
직접 바꿔보세요focus-visible과 checked 상태를 직접 확인하세요.