0. 의사 클래스란 무엇인가?
의사 클래스(Pseudo-class)는 HTML 요소의 특정 상태에 따라 스타일을 적용할 수 있도록 해주는 CSS 기능입니다. 예를 들어 마우스를 올렸을 때, 포커스를 받았을 때, 첫 번째 자식일 때 등 특정 조건을 만족하는 요소에만 스타일을 적용합니다. HTML에 클래스를 직접 쓰지 않아도 동적으로 스타일을 줄 수 있습니다.
예시로 알아보는 의사 클래스 사용 이유
다음과 같은 기사가 있습니다. 기사의 첫 번째 단락을 더 크고 굵게 만들고 싶다면 이전에 배웠던 클래스 선택자를 이용해 해당 단락에 클래스를 추가한 다음 해당 클래스에 CSS를 추가할 수 있습니다.
<article>
<p class="first">
Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
daikon amaranth tatsoi tomatillo melon azuki bean garlic.
</p>
<p>
Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
Dandelion cucumber earthnut pea peanut soko zucchini.
</p>
</article>
.first {
font-size: 120%;
font-weight: bold;
}

하지만 이런 방법은 문서 상단에 새 단락이 추가해야 되는 경우처럼 특정 상황에서 코드를 유지하기 힘들 수 있습니다. 새 단락을 추가할 때마다 클래스의 위치를 바꿔야 하기 때문이죠. 클래스를 추가하는 대신 :first-child 의사 클래스를 사용할 수 있습니다. 해당 의사 클래스는 첫 번째 하위 요소를 대상으로 하기 때문에 더 이상 HTML을 편집할 필요가 없습니다.
<article>
<p>
Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
daikon amaranth tatsoi tomatillo melon azuki bean garlic.
</p>
<p>
Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.
Dandelion cucumber earthnut pea peanut soko zucchini.
</p>
</article>
article p:first-child {
font-size: 120%;
font-weight: bold;
}

1. 의사 클래스 :
의사 클래스는 요소의 상태에 따라 스타일을 지정할 수 있는 선택자입니다.
HTML에 직접 클래스를 쓰지 않아도 되고, 콜론 :으로 시작합니다.
주요 예시
| 의사 클래스 | 설명 |
|---|---|
:hover |
마우스를 올렸을 때 적용됩니다. |
:focus |
포커스를 받았을 때 적용됩니다. |
:first-child |
첫 번째 자식 요소일 때 적용됩니다. |
:nth-child(n) |
n 번째 자식 요소일 때 적용됩니다. |
이러한 방식은 마크업을 깔끔하게 유지하면서도 상태에 따른 스타일을 줄 수 있어 유용합니다.
2. 의사 요소 ::
의사 요소는 HTML 요소의 특정 부분이나 가상의 요소에 스타일을 적용합니다.
일반적으로 이중 콜론 ::으로 시작하며, 일부 구형 문법에서는 :도 사용됩니다.
주요 예시
| 의사 요소 | 설명 |
|---|---|
::before |
요소 앞에 가상의 콘텐츠를 삽입합니다. |
::after |
요소 뒤에 가상의 콘텐츠를 삽입합니다. |
::first-line |
첫 번째 줄에만 스타일을 적용합니다. |
::first-letter |
첫 글자에만 스타일을 적용합니다. |
의사 요소는 시각적인 효과나 장식용 콘텐츠에 자주 사용됩니다.
3. 차이점 정리
| 구분 | 의사 클래스 | 의사 요소 |
|---|---|---|
| 적용 기준 | 상태를 기반으로 선택합니다. | 요소의 일부 또는 가상의 요소를 선택합니다. |
| 구문 | : 사용 |
:: 사용 |
4. 우선순위
CSS 우선순위 계산 시,
- 의사 클래스는 10점 (중간 우선순위)
- 의사 요소는 1점 (낮은 우선순위)으로 계산됩니다.
스타일 충돌 시, 점수가 높은 선택자가 우선 적용됩니다.
5. 예시 코드
5-1. 의사 클래스 예시
/* CSS */
/* 마우스를 버튼 위에 올리면 배경색이 파란색으로 바뀝니다. */
button:hover {
background-color: #007BFF;
color: white;
}
/* 리스트 중 첫 번째 항목만 굵은 글씨로 표시됩니다. */
li:first-child {
font-weight: bold;
}
<!-- HTML -->
<ul>
<li>첫 번째 항목</li>
<li>두 번째 항목</li>
<li>세 번째 항목</li>
</ul>
<button>마우스를 올려보세요</button>

5-2. 의사 요소 예시
/* CSS */
/* 제목 앞에 별 아이콘이 삽입됩니다. */
h1::before {
content: "★ ";
color: gold;
}
/* 단락의 첫 줄만 글자 크기와 색상이 달라집니다. */
p::first-line {
font-size: 1.2em;
color: darkblue;
}
<!-- HTML -->
<h1>공지사항</h1>
<p>
이 문장은 의사 요소를 설명하는 예시입니다. 첫 번째 줄만 스타일이 적용됩니다.
</p>

5-3. 의사 클래스 + 의사 요소 조합 예시
/* CSS */
/* 첫 번째 단락의 첫 글자만 크게, 붉은색으로 강조됩니다. */
p:first-child::first-letter {
font-size: 2em;
color: red;
font-weight: bold;
}
<!-- HTML -->
<div>
<p>이 단락의 첫 글자는 크게 표시됩니다.</p>
<p>이 단락은 일반 스타일입니다.</p>
</div>

정리
- 의사 클래스는 요소의 상태를 기준으로 스타일을 지정합니다.
- 의사 요소는 요소 내부의 특정 부분이나 가상의 콘텐츠에 스타일을 지정합니다.
- 둘을 적절히 조합하면 더 풍부한 스타일링이 가능하며, HTML 구조를 복잡하게 만들지 않아도 됩니다.
도움이 되셨길 바랍니다 :)
출처
의사 클래스와 의사 요소 - Web 개발 학습하기 | MDN
다음으로 살펴볼 선택자의 종류는 의사 클래스 및 의사 요소라고 합니다. 여러 개가 있으며, 종종 매우 특정한 목적을 위해 사용됩니다. 사용 방법을 알게 되면 목록을 보고 달성하려는 작업에
developer.mozilla.org
'Front-End > CSS' 카테고리의 다른 글
| CSS 선택자: 결합자(Combinator) (0) | 2025.06.13 |
|---|---|
| CSS 레이아웃: Floats (0) | 2025.06.12 |
| CSS 선택자: 속성 선택자 (0) | 2025.06.11 |
| CSS 선택자: 유형, 클래스 및 ID (0) | 2025.06.10 |
| CSS Basics: CSS 작동 방식 (0) | 2025.06.09 |