CSS 의사 클래스(Pseudo-Class)란?
CSS 의사 클래스는 선택자(selector)에 특별한 효과를 추가하기 위해 사용되는 기능입니다. 의사 클래스를 활용하면 JavaScript나 그 밖의 별도 스크립트 없이도 순수 CSS만으로 다양한 동적 효과를 손쉽게 구현할 수 있습니다.
의사 클래스는 콜론(:) 기호로 표기하며, 요소의 상태(마우스 오버, 포커스 등)나 문서 내 위치에 따라 조건부로 스타일을 적용할 수 있다는 점이 큰 장점입니다.
가장 많이 사용되는 의사 클래스
| 값 | 설명 |
|---|---|
| :link | 아직 방문하지 않은 링크에 특별한 스타일을 적용합니다. |
| :visited | 방문한 적이 있는 링크에 특별한 스타일을 적용합니다. |
| :hover | 요소 위에 마우스 커서를 올렸을 때 특별한 스타일을 적용합니다. |
| :active | 활성화된(클릭 중인) 요소에 특별한 스타일을 적용합니다. |
| :focus | 포커스를 가지고 있는 요소에 특별한 스타일을 적용합니다. |
| :first-child | 다른 요소의 첫 번째 자식에 해당하는 요소에 특별한 스타일을 적용합니다. |
| :lang | 지정된 요소에서 사용할 언어를 지정합니다. |
의사 클래스 사용 예시
다음은 링크에 마우스를 올렸을 때 색상과 밑줄을 변경하는 간단한 예시입니다.
a:hover {
color: #ff5722;
text-decoration: underline;
}링크 관련 의사 클래스는 선언 순서가 중요합니다. 일반적으로 :link → :visited → :hover → :active(LVHA 순서)로 작성해야 각 상태의 스타일이 의도대로 정상적으로 적용됩니다.