CSS 가상 클래스(Pseudo-Class) 완벽 정리

CSS 가상 클래스(Pseudo-Class) 완벽 정리

---

1. 가상 클래스(Pseudo-Class)란 무엇인가

가상 클래스(Pseudo-Class)는 HTML 문서 구조에는 존재하지 않지만,
특정한 “상태(state)”나 “조건(condition)”에 따라 스타일을 적용할 수 있게 하는 CSS 선택자입니다.
즉, HTML 코드에 별도의 클래스 이름을 추가하지 않아도,

“요소가 마우스를 올렸을 때”,
“링크가 방문된 후일 때”,
“첫 번째 자식일 때”
같은 특정 상황에서 자동으로 스타일을 바꿔줄 수 있습니다.

핵심 개념

• 가상 클래스는 :(콜론) 기호로 표시합니다.
• 실제 HTML 구조에는 존재하지 않는 가상의 클래스 이름입니다.

예시:

a:hover {
  color: red;
}

위 코드는 링크에 마우스를 올렸을 때(:hover) 색상이 빨간색으로 바뀝니다.
즉, HTML에 “hover”라는 클래스가 없어도 해당 상태에 자동으로 반응합니다.

---

2. 가상 클래스의 기본 형식

선택자:가상클래스 {
  속성: 값;
}

예시:

p:first-child {
  color: blue;
}

의미:

• <p> 요소가 부모 안에서 첫 번째 자식일 때 파란색으로 표시됩니다.

이처럼 가상 클래스는 요소의 상태 또는 위치를 기준으로 스타일을 제어합니다.

---

3. 대표적인 가상 클래스 종류

가상 클래스는 크게 두 범주로 나눌 수 있습니다.

구분	설명	예시
상태 기반(State-based)	요소의 상태 변화에 반응	:hover, :active, :focus, :visited
구조 기반(Structural)	요소의 문서 내 위치나 관계에 따라 적용	:first-child, :last-child, :nth-child(), :not()

---

4. 상태 기반 가상 클래스

(1) :hover

요소에 마우스를 올렸을 때 적용됩니다.

button:hover {
  background-color: lightblue;
}

• 마우스를 버튼 위에 올리면 배경색이 파란빛으로 바뀝니다.

(2) :active

요소가 클릭되는 순간 적용됩니다.

button:active {
  transform: scale(0.95);
}

• 클릭하는 순간 버튼이 살짝 눌린 듯한 효과를 줍니다.

(3) :focus

요소가 입력 포커스를 가질 때 적용됩니다. (예: 키보드 입력창)

input:focus {
  border-color: #007bff;
  outline: none;
}

• 사용자가 입력창을 클릭하면 테두리가 파란색으로 바뀝니다.

(4) :visited

링크가 이미 방문된 상태일 때 적용됩니다.

a:visited {
  color: purple;
}

• 사용자가 클릭한 적 있는 링크는 보라색으로 표시됩니다.

---

5. 구조 기반 가상 클래스

(1) :first-child

부모 안에서 첫 번째 자식 요소에 적용됩니다.

li:first-child {
  color: red;
}

• 목록 중 첫 번째 항목만 빨간색으로 표시됩니다.

(2) :last-child

부모 안에서 마지막 자식 요소에 적용됩니다.

li:last-child {
  color: blue;
}

• 목록 중 마지막 항목만 파란색으로 표시됩니다.

(3) :nth-child(n)

자식 요소의 순서를 지정하여 선택할 수 있습니다.

li:nth-child(2) {
  color: green;
}

• 두 번째 항목만 초록색으로 표시됩니다.

n을 식으로 쓸 수도 있습니다.
예를 들어 :nth-child(2n)은 짝수 번째 요소,
:nth-child(2n+1)은 홀수 번째 요소를 의미합니다.

(4) :not(선택자)

특정 선택자를 제외한 나머지를 선택합니다.

p:not(.highlight) {
  color: gray;
}

• 클래스 이름이 .highlight가 아닌 모든 <p>는 회색으로 표시됩니다.

---

6. 가상 클래스와 실제 클래스의 차이

비교 항목	실제 클래스(Class)	가상 클래스(Pseudo-Class)
표현 방식	class="이름"	:이름
존재 위치	HTML 코드에 직접 존재	CSS에서만 존재 (HTML에는 없음)
용도	고정된 스타일 지정	특정 상태나 조건에서만 적용
예시	<div class="box">	div:hover, div:first-child

즉, 가상 클래스는 HTML을 수정하지 않아도 동적인 스타일 제어가 가능하다는 점이 핵심입니다.

---

7. 복합 예제

<ul>
  <li>첫 번째</li>
  <li>두 번째</li>
  <li>세 번째</li>
</ul>

li:first-child {
  color: red;
}
li:hover {
  background-color: yellow;
}
li:nth-child(odd) {
  font-weight: bold;
}

결과:

• 첫 번째 항목은 빨간색.
• 마우스를 올리면 노란색 배경.
• 홀수 번째 항목(1, 3)은 굵은 글씨.

즉, HTML을 수정하지 않고도 상태 변화와 구조적 조건에 따라 시각적 스타일이 자동 적용됩니다.

---

8. 요약 및 결론

항목	내용
정의	HTML 구조에 직접 없는 “특정 상태나 조건”에 스타일을 적용하는 CSS 선택자
표현 형식	선택자:가상클래스
기호	콜론(:)으로 시작
종류	상태 기반(:hover, :active, :focus), 구조 기반(:first-child, :nth-child)
특징	HTML을 수정하지 않아도 동적 반응 가능
장점	코드 간결, 유지보수 용이, 동적 스타일 제어 가능

결론:
가상 클래스는 단순한 스타일 지정이 아닌,
사용자의 행동이나 문서의 구조적 관계에 반응하는 “조건부 스타일링 도구”입니다.
이를 활용하면 HTML 코드를 수정하지 않고도
사용자 인터랙션에 맞춰 자연스럽게 변화하는 UI를 구현할 수 있습니다.