CSS 의사 클래스(Pseudo-Class) 활용 방법 완벽 정리

CSS 의사 클래스(Pseudo-Class)를 사용하면 HTML의 기존 요소에 특정 상태별 스타일을 손쉽게 추가할 수 있습니다. 예를 들어 마우스 오버(hover), 방문한 링크(visited), 비활성화(disabled)와 같은 상태를 기준으로 요소를 선택할 수 있습니다.

참고 — CSS3에서는 의사 클래스(Pseudo-Class)와 의사 요소(Pseudo-Element)를 구분하기 위해, 의사 클래스에는 단일 콜론(:) 표기법을 사용합니다. 반면 의사 요소는 이중 콜론(::)을 사용합니다.

기본 문법

요소에 CSS 의사 클래스를 적용하는 기본 문법은 다음과 같습니다.

Selector:pseudo-class {
   css-property: /*값*/;
}

주요 CSS 의사 클래스 목록

아래 표는 실무에서 활용할 수 있는 모든 CSS 의사 클래스를 정리한 것입니다.

번호	의사 클래스 및 설명
1	:active 마우스로 클릭하는 등 활성화된 상태의 요소를 선택합니다.
2	:checked 체크박스나 라디오 버튼처럼 체크된 상태의 모든 요소를 선택합니다.
3	:disabled 비활성화된 상태의 모든 요소를 선택합니다.
4	:empty 자식 요소가 하나도 없는 모든 요소를 선택합니다.
5	:enabled 활성화된 상태의 모든 요소를 선택합니다.
6	:first-child 부모 요소의 첫 번째 자식인 모든 요소를 선택합니다.
7	:first-of-type 부모 요소 내에서 해당 타입 중 첫 번째인 요소를 선택합니다.
8	:focus 현재 포커스를 가진 요소를 선택합니다.
9	:hover 마우스 커서가 올라간 상태의 요소를 선택합니다.
10	:in-range 지정된 범위 안에 있는 값을 가진 요소를 선택합니다.
11	:invalid 유효하지 않은 값을 가진 모든 요소를 선택합니다.
12	:lang(언어) lang 속성 값이 지정한 언어로 시작하는 모든 요소를 선택합니다.
13	:last-child 부모 요소의 마지막 자식인 모든 요소를 선택합니다.
14	:last-of-type 부모 요소 내에서 해당 타입 중 마지막인 요소를 선택합니다.
15	:link 아직 방문하지 않은 모든 링크 요소를 선택합니다.
16	:not(selector) 지정한 선택자에 해당하지 않는 모든 요소를 선택합니다.
17	:nth-child(n) 부모 요소의 n번째 자식인 모든 요소를 선택합니다.
18	:nth-last-child(n) 뒤에서부터 세어 n번째 자식인 모든 요소를 선택합니다.
19	:nth-last-of-type(n) 뒤에서부터 세어 해당 타입 중 n번째인 요소를 선택합니다.
20	:nth-of-type(n) 부모 요소 내에서 해당 타입 중 n번째인 요소를 선택합니다.
21	:only-of-type 부모 요소 내에서 해당 타입이 유일한 요소를 선택합니다.
22	:only-child 부모 요소의 유일한 자식인 요소를 선택합니다.
23	:optional required 속성이 없는 입력 요소를 선택합니다.
24	:out-of-range 지정된 범위를 벗어난 값을 가진 요소를 선택합니다.
25	:read-only readonly 속성이 지정된 요소를 선택합니다.
26	:read-write readonly 속성이 없어 편집 가능한 요소를 선택합니다.
27	:required required 속성이 지정된 요소를 선택합니다.
28	:root 문서의 루트(root) 요소를 선택합니다.
29	:target URL의 앵커 이름과 일치하여 현재 활성화된 요소를 선택합니다.
30	:valid 유효한 값을 가진 모든 요소를 선택합니다.
31	:visited 이미 방문한 모든 링크 요소를 선택합니다.

예제 1: 앵커(링크) 의사 클래스

먼저 링크 요소에 의사 클래스를 적용하는 예제를 살펴보겠습니다.

<!DOCTYPE html>
<html>
<head>
<title>CSS Anchor Pseudo Classes</title>
</head>
<style>
div {
   color: #000;
   padding:20px;
   background-image: linear-gradient(135deg, grey 0%, white 100%);
   text-align: center;
}
.anchor {
   color: #FF8A00;
}
.anchor:last-child {
   color: #03A9F4;
}
.anchor:visited {
   color: #FEDC11;
}
.anchor:hover {
   color: #C303C3;
}
.anchor:active {
   color: #4CAF50;
}
</style>
<body>
<div>
<h1>Search Engines</h1>
<a class="anchor" href="https://www.google.com" target="_blank">Go To Google</a>
<a class="anchor" href="https://www.bing.com" target="_blank">Go To Bing</a>
</div>
</body>
</html>

실행 결과

위 코드를 실행하면 다음과 같은 화면이 출력됩니다.

CSS 의사 클래스(Pseudo-Class) 활용 방법 완벽 정리

예제 2: nth-of-type과 hover 조합

이번에는 :nth-of-type()으로 각 자식 요소에 서로 다른 배경색을 지정하고, :hover로 마우스 오버 시 색상을 변경하는 예제입니다.

<!DOCTYPE html>
<html>
<head>
<title>CSS Pseudo Classes</title>
<style>
form {
   width:70%;
   margin: 0 auto;
   text-align: center;
}
* {
   padding: 2px;
   margin:5px;
   box-sizing: border-box;
}
.child{
   display: inline-block;
   height: 40px;
   width: 40px;
   color: white;
   border: 4px solid black;
}
.child:nth-of-type(1){
   background-color: #FF8A00;
}
.child:nth-of-type(2){
   background-color: #F44336;
}
.child:nth-of-type(3){
   background-color: #C303C3;
}
.child:nth-of-type(4){
   background-color: #4CAF50;
}
.child:nth-of-type(5){
   background-color: #03A9F4;
}
.child:nth-of-type(6){
   background-color: #FEDC11;
}
.child:hover{
   background-color: #000;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS-Pseudo-Classes</legend>
<div id="container">
<div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div>
</div><br>
</body>
</html>

실행 결과

위 코드를 실행하면 다음과 같은 화면이 출력됩니다.

div 요소에 마우스를 올리지 않았을 때:

CSS 의사 클래스(Pseudo-Class) 활용 방법 완벽 정리

div 요소에 마우스를 올렸을 때(hover 상태):

CSS 의사 클래스(Pseudo-Class) 활용 방법 완벽 정리