Pseudo-class (의사 클래스)

 

🟢 Pseudo-class

HTML 요소의 상태(state)나 특정 조건을 기준으로 스타일을 적용할 수 있게 해주는 선택자.

 

1️⃣ 사용자의 동작에 반응하는 가상 클래스

• :hover: 특정 요소에 마우스 포인트를 올려놓으면 스타일 적용.

button:hover {
  background-color: blue;
}

 

• :active: 특정 요소를 클릭하는 순간 스타일 적용.

button:active {
  background-color: red;
}

 

• :focus: 특정 요소에 초점이 맞추어지거나, Tab 키로 이동했을 때 스타일 적용.

input:focus {
  outline: 2px solid green;
}

 

 

2️⃣ 링크 및 요소 상태에 따른 가상 클래스

• :link: 방문하지 않은 링크에 스타일 적용.

a:link {
  color: blue;
}

 

• :visited: 방문한 링크에 스타일 적용.

a:visited {
  color: purple;
}

 

• :enabled: 해당 요소가 사용할 수 있는 상태일 경우.

button:enabled {
  background: green;
}

 

• :disabled: 해당 요소가 사용할 수 없는 상태일 경우.

button:disabled {
  background: gray;
}

 

• :checked: 폼의 라디오 버튼이 체크 박스 버튼에서 선택된 항목일 경우.

input:checked {
  accent-color: green;
}

 

 

3️⃣ 문서 구조를 사용하는 가상 클래스

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

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

/* p 요소 중 첫 번째 요소 선택 */
.container p:nth-of-type(1) { background-color: red; }

• :first-child: 부모 요소의 첫 번째 자식 요소 선택.
• :last-child: 부모 요소의 마지막 자식 요소 선택.
• :only-child: 부모 요소의 자식 요소가 하나일 때 선택.
• :nth-child(n): 부모 요소의 n번째 자식 요소를 선택.
  • 2n: 짝수. (2, 4, 6, 8, ...)
  • 2n+1: 홀수. (1, 3, 5, 7, ...)
  • 3n: 3의 배수.
  • n+3: 3번째부터 끝까지.
  • odd: 홀수 번째. (1, 3, 5, 7, ...)
  • even: 짝수 번째. (2, 4, 6, 8, ...)
• :nth-of-type(n): 같은 타입의 요소들 사이에서 순서를 지정.

 

4️⃣ 부정/조건 선택 가상 클래스

div:not(.active) {
  opacity: 0.5;
}

• :not(조건): 특정 조건을 제외하는 선택. (제외)
• :is(조건): 여러 선택자 중 하나라도 맞으면 선택. (OR 조건)
• :where(조건): 여러 선택자 중 하나라도 맞으면 선택하지만, 우선순의가 항상 0으로 덮어쓰기 쉽게 만들기 위한 선택자. (OR + 우선순위 0)
• :has(조건): 특정 자식/후손 요소를 포함한 부모를 선택. (자식 조건 기반 부모 선택)

 

 

 

📍  POINT 📍 

✔️ 가상 클래스는 콜론 하나(:)를 사용하여 작성한다. ✔️

✔️ :nth-child 는 아주 강력한 선택자로, 복잡한 표(Table)나 리스트 스타일링에 유용하다. ✔️

✔️ :not() 선택자를 잘 활용하면 예외 케이스(예: 마지막 요소만 제외하고 마진 주기)를 쉽게 처리할 수 있다. ✔️

 

 

📋 주요 가상 클래스 요약표 📋

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

 

---

 

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

<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>​