CSS 선택자: 의사 클래스와 의사 요소

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-1 예시

---

5-2. 의사 요소 예시

/* CSS */

/* 제목 앞에 별 아이콘이 삽입됩니다. */
h1::before {
  content: "★ ";
  color: gold;
}

/* 단락의 첫 줄만 글자 크기와 색상이 달라집니다. */
p::first-line {
  font-size: 1.2em;
  color: darkblue;
}

<!-- HTML -->

<h1>공지사항</h1>

<p>
  이 문장은 의사 요소를 설명하는 예시입니다. 첫 번째 줄만 스타일이 적용됩니다.
</p>

5-2 예시

---

5-3. 의사 클래스 + 의사 요소 조합 예시

/* CSS */

/* 첫 번째 단락의 첫 글자만 크게, 붉은색으로 강조됩니다. */
p:first-child::first-letter {
  font-size: 2em;
  color: red;
  font-weight: bold;
}

<!-- HTML -->

<div>
  <p>이 단락의 첫 글자는 크게 표시됩니다.</p>
  <p>이 단락은 일반 스타일입니다.</p>
</div>

5-3 예시

 

---

정리

• 의사 클래스는 요소의 상태를 기준으로 스타일을 지정합니다.
• 의사 요소는 요소 내부의 특정 부분이나 가상의 콘텐츠에 스타일을 지정합니다.
• 둘을 적절히 조합하면 더 풍부한 스타일링이 가능하며, HTML 구조를 복잡하게 만들지 않아도 됩니다.

도움이 되셨길 바랍니다 :)

 

출처

의사 클래스와 의사 요소 - Web 개발 학습하기 | MDN