CSS 의사 클래스(Pseudo-class)란?
의사 클래스(Pseudo-class)는 선택자 뒤에 콜론(:)을 붙여 표기하며, 요소의 특정 상태에 따라 스타일을 적용할 수 있게 해주는 CSS 기능입니다. 예를 들어 링크를 방문했는지 여부, 마우스 커서가 올라가 있는지, 요소가 포커스를 받고 있는지 등의 상태를 자바스크립트 없이 CSS만으로 제어할 수 있습니다.
자주 사용되는 의사 클래스 한눈에 보기
| 의사 클래스 | 설명 |
|---|---|
:link | 아직 방문하지 않은 링크에 특별한 스타일을 적용합니다. |
:visited | 이미 방문한 적이 있는 링크에 특별한 스타일을 적용합니다. |
:hover | 마우스 포인터를 요소 위에 올렸을 때 특별한 스타일을 적용합니다. |
:active | 클릭되는 순간처럼 활성화된 상태의 요소에 특별한 스타일을 적용합니다. |
:focus | 입력 필드 등 포커스를 가지고 있는 요소에 특별한 스타일을 적용합니다. |
:first-child | 부모 요소의 첫 번째 자식인 요소에 특별한 스타일을 적용합니다. |
:lang | 특정 요소에 사용될 언어를 지정하고, 해당 언어에 맞는 스타일을 적용합니다. |
링크 관련 의사 클래스 작성 시 주의점
링크 상태를 나타내는 네 가지 의사 클래스(:link, :visited, :hover, :active)는 선언 순서가 결과에 영향을 줍니다. 서로 스타일이 덮어써지지 않도록 아래와 같은 LVHA 순서(Link → Visited → Hover → Active)로 작성하는 것이 일반적인 규칙입니다.
a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: red; }
a:active { color: orange; }마무리
의사 클래스를 잘 활용하면 별도의 스크립트 없이도 사용자 인터랙션에 반응하는 동적인 웹 페이지를 만들 수 있습니다. 위에서 소개한 기본적인 의사 클래스들을 먼저 익혀 두면, 이후 더 복잡한 구조적 의사 클래스(:nth-child() 등)를 학습할 때도 큰 도움이 됩니다.