Pseudo-classes

사용자의 동작이나 요소의 특정 상태에 따라 스타일을 부여하는 **CSS 가상 클래스(Pseudo-classes)**에 대해 알아보겠습니다.

가상 클래스는 HTML 문서 구조상에는 존재하지 않지만, "마우스를 올렸을 때", "방문한 적이 있을 때", **"첫 번째 자식일 때"**와 같은 특별한 상태를 선택할 수 있게 해주는 도구입니다.

---

1. 사용자의 동작에 반응하는 가상 클래스 (User Action)

사용자의 상호작용에 따라 실시간으로 스타일이 변합니다.

• :hover: 요소 위에 마우스 커서를 올렸을 때 적용됩니다.
• :active: 요소를 마우스로 클릭하고 있는 순간에 적용됩니다.
• :focus: 탭 키로 이동하거나 클릭하여 요소에 커서가 활성화되었을 때 적용됩니다. (주로 input이나 button에 사용)

CSS

 

.btn { background-color: gray; transition: 0.3s; }
.btn:hover { background-color: blue; }    /* 마우스 올리면 파란색 */
.btn:active { background-color: darkblue; } /* 클릭 시 진한 파란색 */

input:focus { border: 2px solid orange; } /* 입력창 클릭 시 주황색 테두리 */

---

2. 요소의 구조를 이용하는 가상 클래스 (Structural)

요소가 부모 안에서 몇 번째에 위치하는지에 따라 스타일을 지정합니다.

• :first-child: 부모의 첫 번째 자식인 요소를 선택합니다.
• :last-child: 부모의 마지막 자식인 요소를 선택합니다.
• :nth-child(n): 부모의 n번째 자식인 요소를 선택합니다. (2n은 짝수, 2n+1은 홀수 선택 가능)

CSS

 

/* 리스트의 첫 번째 항목만 글자 크기 키우기 */
li:first-child { font-size: 20px; }

/* 리스트의 짝수 번째 항목만 배경색 입히기 */
li:nth-child(2n) { background-color: #f9f9f9; }

---

3. 링크 및 상태 관련 가상 클래스

하이퍼링크나 폼 요소의 특정 상태를 제어합니다.

• :link: 방문한 적이 없는 링크를 선택합니다.
• :visited: 이미 방문한 적이 있는 링크를 선택합니다.
• :enabled / :disabled: 활성화되거나 비활성화된 폼 요소를 선택합니다.
• :checked: 체크박스나 라디오 버튼이 선택된 상태일 때 적용됩니다.

---

🖥️ 실전 예제 코드: "반응형 리스트와 폼"

HTML

 

<style>
  /* 1. 리스트 스타일링 */
  ul li { padding: 10px; border-bottom: 1px solid #ddd; }
  ul li:hover { background-color: #eef; cursor: pointer; }
  ul li:first-child { border-top: 2px solid #333; }
  ul li:nth-child(odd) { color: navy; } /* 홀수 번째만 남색 */

  /* 2. 체크박스 강조 */
  input[type="checkbox"]:checked + label {
    font-weight: bold;
    color: green;
  }

  /* 3. 비활성 입력창 */
  input:disabled { background-color: #eee; cursor: not-allowed; }
</style>

<ul>
  <li>첫 번째 항목 (두꺼운 선)</li>
  <li>두 번째 항목 (남색 아님)</li>
  <li>세 번째 항목 (남색)</li>
  <li>네 번째 항목 (남색 아님)</li>
</ul>

<input type="checkbox" id="agree">
<label for="agree">약관에 동의합니다.</label>

<input type="text" value="수정 불가" disabled>

---

📋 주요 가상 클래스 요약표

종류	가상 클래스	의미
동적	:hover, :active, :focus	사용자의 움직임에 반응
구조	:first-child, :last-child, :nth-child	부모 내 순서에 따라 선택
상태	:checked, :disabled, :required	요소의 설정 상태에 따라 선택
부정	:not(선택자)	특정 조건이 아닌 요소만 선택

---

학습 정리

• 가상 클래스는 콜론 하나(:)를 사용하여 작성합니다.
• **:nth-child**는 아주 강력한 선택자로, 복잡한 표(Table)나 리스트 스타일링의 핵심입니다.
• :not() 선택자를 잘 활용하면 예외 케이스(예: 마지막 요소만 제외하고 마진 주기)를 쉽게 처리할 수 있습니다.

---

상태에 따라 유연하게 변하는 가상 클래스를 정복하셨습니다!

---