CSS 가상 클래스(Pseudo-classes)

CSS의 가상 클래스(Pseudo-classes)는 선택자에 특별한 상태를 정의할 때 사용합니다.

가상 클래스를 이용하면 요소가 특정 상태에 있을 때 스타일을 적용할 수 있습니다.

자주 사용되는 CSS 가상 클래스의 종류와 예시를 표로 정리한 것입니다

가상 클래스	설명	예시
:hover	사용자 마우스가 요소 위에 있을 때 적용	a:hover { color: red; }
:focus	요소가 포커스를 받았을 때 (예: 입력 필드에 커서가 있을 때) 적용	input:focus { border: 2px solid blue; }
:active	요소가 활성화됐을 때 (예: 버튼을 클릭하는 순간) 적용	button:active { background-color: yellow; }
:visited	링크를 방문한 후 적용	a:visited { color: purple; }
:first-child	형제 요소 중 첫 번째 요소에 적용	p:first-child { font-weight: bold; }
:last-child	형제 요소 중 마지막 요소에 적용	p:last-child { color: green; }
:nth-child(n)	형제 요소 중 n번째 요소에 적용	p:nth-child(2) { color: orange; }
:nth-of-type(n)	동일한 타입의 형제 요소 중 n번째 요소에 적용	div:nth-of-type(odd) { background: #eee; }
:not(selector)	주어진 선택자가 아닌 요소에 적용	:not(p) { color: red; }
:checked	체크박스나 라디오 버튼이 체크되었을 때 적용	input:checked { height: 50px; }
:disabled	비활성화된 폼 요소에 적용	input:disabled { background: #ccc; }
:empty	내용이 비어 있는 요소에 적용	p:empty { display: none; }
:root	문서의 루트 요소에 적용	:root { --main-color: green; }