---
id: css-combinators
title: "CSS Combinators"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["combinators", "descendant selector", "child selector", "sibling selector", "selector relationships"]
duplicate_of: ""
source_trust_level: "B"
confidence_score: 0.89
created_at: 2026-06-23
updated_at: 2026-06-23
review_reason: ""
merge_history: []
tags: ["css", "web", "frontend", "w3schools", "selectors", "combinators"]
raw_sources: ["https://www.w3schools.com/css/css_combinators.asp"]
applied_in: []
github_commit: ""
---

# [[CSS Combinators]]

## 🎯 한 줄 통찰 (One-line insight)
A combinator defines the relationship between two or more selectors, letting you target elements by their position relative to another element — descendants (space), direct children (`>`), the next sibling (`+`), or all following siblings (`~`). [S1]

## 🧠 핵심 개념 (Core concepts)
- **What a combinator is** — something that defines the relationship between two or more selectors. [S1]
- **Descendant combinator (space)** — matches all elements that are descendants (children, grandchildren, etc.) of a specified element. [S1]
- **Child combinator (`>`)** — selects all elements that are direct children of a specified element. [S1]
- **Next sibling combinator (`+`)** — selects an element that is directly after a specific element (the first adjacent sibling). [S1]
- **Subsequent-sibling combinator (`~`)** — selects all elements that are next siblings of a specified element. [S1]

## 🧩 추출된 패턴 (Extracted patterns)
- **Relationship-based selection** — instead of adding classes, target elements by structural relationship (`div p`, `div > p`, `div + p`, `div ~ p`). [S1]
- **Direct-child vs any-descendant** — use a space to reach any depth, `>` to restrict to immediate children. [S1]
- **One-sibling vs all-siblings** — `+` matches only the first following sibling, `~` matches every following sibling. [S1]

## 📖 세부 내용 (Details)
**Definition**
A combinator is something that defines the relationship between two or more selectors. [S1]

**Descendant Combinator (space)**
The descendant combinator matches all elements that are descendants (children, grandchildren, etc.) of a specified element. The following example selects all `<p>` elements inside `<div>` elements: [S1]
```css
div p {
  background-color: yellow;
}
```

**Child Combinator (`>`)**
The child combinator selects all elements that are direct children of a specified element. The following example selects all `<p>` elements that are immediate children of a `<div>`: [S1]
```css
div > p {
  background-color: yellow;
}
```

**Next Sibling Combinator (`+`)**
The next sibling combinator is used to select an element that is directly after a specific element. Sibling elements must have the same parent element, and "adjacent" means "immediately following". The following example selects the first `<p>` element placed immediately after a `<div>`: [S1]
```css
div + p {
  background-color: yellow;
}
```

**Subsequent-sibling Combinator (`~`)**
The subsequent-sibling combinator selects all elements that are next siblings of a specified element. The following example selects all `<p>` elements that are siblings of (and come after) a `<div>`: [S1]
```css
div ~ p {
  background-color: yellow;
}
```

The page references a complete CSS Combinators Reference for additional details. [S1]

## 🛠️ 적용 사례 (Applied in summary)
The page's own applied examples demonstrate each of the four combinators by setting `background-color: yellow;` on the matched `<p>` elements. No external project/commit applications found in the source.

## 💻 코드 패턴 (Code patterns)
The four combinators (language: CSS):
```css
div p   { background-color: yellow; } /* descendant */
div > p { background-color: yellow; } /* direct child */
div + p { background-color: yellow; } /* next sibling */
div ~ p { background-color: yellow; } /* all following siblings */
```

## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
- **Descendant (space) vs Child (`>`)** — space matches descendants at any depth; `>` restricts to immediate children only. [S1]
- **Next sibling (`+`) vs Subsequent sibling (`~`)** — `+` matches only the single element directly following; `~` matches every following sibling with the same parent. [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.89
- **중복 검사 결과:** 신규 생성 (New discovery)

## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[CSS Tutorial]]
- **관련 개념:** [[CSS Selectors]], [[CSS Pseudo-classes]], [[CSS Pseudo-elements]], [[CSS Syntax]]
- **참조 맥락:** Referenced whenever you need to select elements by their structural relationship rather than by class or id.

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

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