CSS에서는 기본 선택자 외에도 특별한 상태나 위치를 지정할 수 있는 가상 클래스와 가상 요소라는 강력한 도구를 제공합니다. 이들을 활용하면 HTML 구조를 변경하지 않고도 더욱 세밀하고 동적인 스타일링이 가능해집니다.

1. 가상 클래스 선택자

가상 클래스 선택자(Pseudo-class selectors)는 요소의 특정 상태를 선택할 수 있게 해줍니다. 이들은 콜론(:)을 사용하여 표현됩니다.

1.1 동적 가상 클래스

동적 가상 클래스는 사용자의 동작에 따라 변화하는 상태를 선택합니다.

1.1.1 마우스를 오버했을 때

:hover는 마우스 포인터가 요소 위에 올라갔을 때의 상태를 선택합니다. 이를 통해 사용자와의 상호작용을 시각적으로 표현할 수 있습니다.

<button class="hover-button">마우스를 올려보세요</button>

.hover-button {
  padding: 10px 20px;
  background-color: #3498db;
  color: white;
  border: none;
  transition: background-color 0.3s;
}

.hover-button:hover {
  background-color: #2980b9;
}

이 예시에서 버튼에 마우스를 올리면 배경색이 변경됩니다. 이처럼 동적 가상 클래스는 사용자의 동작에 따라 요소의 스타일을 변경할 수 있습니다.

1.2 구조적 가상 선택자

구조적 가상 선택자는 문서 구조 내에서 요소의 위치에 따라 선택합니다.

1.2.1 첫 번째와 마지막 요소 선택

:first-child는 형제 요소 그룹 중 첫 번째 요소를, :last-child는 마지막 요소를 선택합니다.

<ul>
  <li>첫 번째 항목</li>
  <li>두 번째 항목</li>
  <li>세 번째 항목</li>
  <li>네 번째 항목</li>
</ul>

li:first-child {
  color: #e74c3c;
}

li:last-child {
  color: #2ecc71;
}

1.2.2 n번째 요소 선택

:nth-child는 형제 사이에서의 순서에 따라 요소를 선택할 수 있게 해줍니다. 이 선택자는 매우 유연하여 다양한 패턴의 선택이 가능합니다.

<ul>
  <li>첫 번째 항목</li>
  <li>두 번째 항목</li>
  <li>세 번째 항목</li>
  <li>네 번째 항목</li>
  <li>다섯 번째 항목</li>
</ul>

/* 짝수 번째 항목 선택 */
li:nth-child(even) {
  background-color: #f1f1f1;
}

/* 3의 배수 번째 항목 선택 */
li:nth-child(3n) {
  color: #3498db;
}

2. 가상 요소

가상 요소(Pseudo-elements)는 말 그대로 가상의 요소를 만드는 것입니다. 선택한 요소의 특정 부분에 스타일을 적용할 수 있게 해줍니다. 이들은 이중 콜론(::)을 사용하여 표현됩니다.

2.1 요소의 전과 후

::before와 ::after는 선택한 요소의 내용 앞이나 뒤에 새로운 요소를 만들어 새로운 콘텐츠를 추가할 수 있게 해줍니다. 이들은 주로 content 속성과 짝을 지어 장식적인 요소를 추가하거나, 기능적인 목적으로 사용됩니다. 빈태그 img br input 에는 적용할 수 없습니다.

<p class="quote">지식은 힘이다</p>

.quote::before {
  content: '『';
  color: #3498db;
  font-size: 1.2em;
  margin-right: 5px;
}

.quote::after {
  content: '』';
  color: #3498db;
  font-size: 1.2em;
  margin-left: 5px;
}