---
id: css-pseudo-classes
title: "CSS Pseudo-classes"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["pseudo-classes", "pseudo class", "special state styling", "hover focus active", "structural pseudo-classes"]
duplicate_of: ""
source_trust_level: "B"
confidence_score: 0.85
created_at: 2026-06-23
updated_at: 2026-06-23
review_reason: ""
merge_history: []
tags: ["css", "web", "frontend", "w3schools", "selectors", "pseudo-classes"]
raw_sources: ["https://www.w3schools.com/css/css_pseudo_classes.asp"]
applied_in: []
github_commit: ""
---

# [[CSS Pseudo-classes]]

## 🎯 한 줄 통찰 (One-line insight)
A CSS pseudo-class is a keyword added to a selector to define a style for a special state of an element — such as hover, focus, visited links, or position within the document tree. [S1]

## 🧠 핵심 개념 (Core concepts)
- **Definition** — a CSS pseudo-class is a keyword that can be added to a selector, to define a style for a special state of an element. [S1]
- **Syntax** — a single colon followed by the pseudo-class name, attached to a selector. [S1]
- **Common use cases** — styling on mouse hover, distinguishing visited vs unvisited links, focus states, and form validation states. [S1]
- **Interactive pseudo-classes** — respond to user actions: `:hover`, `:focus`, `:active`, `:link`, `:visited`. [S1]
- **Structural pseudo-classes** — select based on document-tree position: `:first-child`, `:last-child`, `:nth-child(n)`, `:lang()`. [S1]

## 🧩 추출된 패턴 (Extracted patterns)
- **State-based styling** — append `:state` to a selector to style a transient or contextual condition rather than a static element. [S1]
- **Two families** — interactive (user-driven) vs structural (position-driven) pseudo-classes cover the two broad selection needs. [S1]

## 📖 세부 내용 (Details)
**What is a pseudo-class?**
A CSS pseudo-class is a keyword that can be added to a selector, to define a style for a special state of an element. [S1]

**Syntax** [S1]
```css
selector:pseudo-class-name {
  CSS properties
}
```

**Common use cases**
The page identifies common applications including styling on mouse hover, distinguishing visited versus unvisited links, focus states, and form validation states. [S1]

**Interactive pseudo-classes (respond to user actions)** [S1]
- `:hover` — when the mouse is over an element.
- `:focus` — when an element has focus.
- `:active` — when an element is being activated.
- `:link` — unvisited links.
- `:visited` — visited links.

**Structural pseudo-classes (select by document-tree position)** [S1]
- `:first-child` — first child of a parent.
- `:last-child` — last child of a parent.
- `:nth-child(n)` — the nth child of a parent.
- `:lang()` — elements with a specific language.

**All CSS Pseudo-classes (reference table)**
Not found in source — the tutorial page links to the separate "CSS Pseudo-classes Reference" for the complete list rather than embedding the full table. [S1]

## 🛠️ 적용 사례 (Applied in summary)
The page describes (rather than ships full code for) common applications: hover styling, visited/unvisited link distinction, focus states, and form-validation states. Detailed worked examples live on the linked interactive and structural pseudo-class pages. No external project/commit applications found in the source.

## 💻 코드 패턴 (Code patterns)
General pseudo-class syntax (language: CSS):
```css
selector:pseudo-class-name {
  CSS properties
}
```

## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
- **Interactive vs structural** — choose an interactive pseudo-class (`:hover`, `:focus`, `:active`, `:link`, `:visited`) to react to user actions or link state; choose a structural pseudo-class (`:first-child`, `:last-child`, `:nth-child(n)`, `:lang()`) to select by position in the document tree. [S1]

## ⚖️ 모순 및 업데이트 (Contradictions & updates)
No contradictions found in the source.

## ✅ 검증 상태 및 신뢰도
- **상태:** draft
- **검증 단계:** conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능)
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
- **신뢰 점수:** 0.85
- **중복 검사 결과:** 신규 생성 (New discovery)

## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[CSS Tutorial]]
- **관련 개념:** [[CSS Interactive Pseudo-classes]], [[CSS Combinators]], [[CSS Selectors]], [[CSS Pseudo-elements]]
- **참조 맥락:** The entry point for styling special element states (hover/focus/link) and structural positions.

## 📚 출처 (Sources)
- [S1] W3Schools — CSS Pseudo-classes — https://www.w3schools.com/css/css_pseudo_classes.asp

## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Pseudo-classes" page (Astra wiki-curation, P-Reinforce v3.1 format).