2nd/10_Wiki/Dev/Topic_CSS/CSS_Combinators.md

id, title, category, status, verification_status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, created_at, updated_at, review_reason, merge_history, tags, raw_sources, applied_in, github_commit

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

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]

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]

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]

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]

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):

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).