프로그래머로의 여정
CSS 의사 클래스 선택자(pseudo-class selector) 란?
by nunaaa
2025. 9. 3.
의사 클래스 선택자는 웹 페이지의 특정 상태나 위치에 있는 요소를 선택하기 위해 사용하는 CSS 선택자입니다. 실제 HTML 문서에 명시적으로 존재하는 클래스나 ID와 달리, 의사 클래스는 요소의 특정 상태(예: 마우스가 올라가 있을 때)나 위치(예: 목록의 첫 번째 항목)에 따라 동적으로 요소를 선택합니다.
주요 의사 클래스 선택자
| 의사 클래스 |
설명 |
예시 |
:hover |
사용자가 마우스 커서를 올렸을 때의 상태를 선택합니다. |
a:hover { color: red; } (링크에 마우스를 올리면 글자색이 빨간색으로 변함) |
:active |
요소를 클릭하거나 활성화했을 때의 상태를 선택합니다. |
button:active { background-color: gray; } (버튼을 클릭하는 동안 배경색이 회색으로 변함) |
:focus |
사용자가 폼 요소(입력창 등)를 선택해 포커스가 맞춰졌을 때의 상태를 선택합니다. |
input:focus { border: 2px solid blue; } (입력창을 클릭하면 파란색 테두리가 생김) |
:first-child |
부모 요소의 첫 번째 자식 요소를 선택합니다. |
li:first-child { font-weight: bold; } (목록의 첫 번째 항목을 굵게 표시) |
:last-child |
부모 요소의 마지막 자식 요소를 선택합니다. |
li:last-child { color: gray; } (목록의 마지막 항목의 글자색을 회색으로 변경) |
:nth-child(n) |
부모 요소의 n번째 자식 요소를 선택합니다. (n은 숫자,odd,even등) |
p:nth-child(2) { font-style: italic; } (부모의 두 번째 <p> 태그를 이탤릭체로 표시) |
:visited |
사용자가 이미 방문한 링크를 선택합니다. |
a:visited { color: purple; } (방문했던 링크의 글자색을 보라색으로 변경) |
:before, :after |
요소의 콘텐츠 앞이나 뒤에 가상 요소를 생성합니다. (엄밀히는 의사 요소(pseudo-element)지만 자주 함께 언급됩니다) |
p:after { content: "✅"; } (모든 <p> 태그 뒤에 체크 표시를 추가) |
왜 사용하는가?
의사 클래스 선택자는 단순히 HTML 구조에 의존하는 것이 아니라, 사용자 경험(User Experience)과 관련된 동적 상태를 제어할 수 있게 해줍니다. 이를 통해 사용자와 상호작용하는 웹 페이지를 만들고, 시각적인 피드백을 제공하여 웹 접근성을 높일 수 있습니다. 예를 들어, 버튼에 마우스를 올렸을 때 색상이 변하면 사용자는 해당 요소가 클릭 가능하다는 것을 직관적으로 알 수 있습니다.
CSS |
JS |
CSS는 상태 변화에 따른 스타일을 간단하게 선언할 수 있습니다. |
JS를 사용하면 상태 변화를 감지하고 스타일을 변경하는 로직을 직접 작성해야 합니다. |
:hover와 같이 자주 사용되는 상태 변화를 직관적인 문법으로 처리합니다. |
addEventListener를 이용해 mouseover, mouseout 등의 이벤트를 감지하고, 해당 요소의 스타일을 변경하는 코드를 작성해야 합니다. |