Antigravity Agent
e9cbf23ab5
이전 재구성 작업에서 Dev/ 폴더가 누락되었던 것을 반영. - Dev/Topic_Programming(중첩 폴더, 78개)은 Dev 자체 최상위 폴더들 (Architecture/Conventions/Engineering_Intelligence 등)과 완전 중복이라 제거. - Dev 최상위 엔지니어링 지식 폴더(Architecture/Conventions/Engineering_Intelligence/ Failure_Library/Generalized_Principles/Language/Pattern_Catalog/Platform_Guides/ Subsystems, 77개)는 이미 Topic_Programming/Topic_Programming에 더 최신 버전이 존재해 중복 제거(고유 콘텐츠 1개는 예외 처리하여 이동 보존). - Dev의 W3Schools 언어 튜토리얼 폴더(Topic_C/CPP/CSS/CSharp/HOWTO/HTML/Java/ JavaScript/PHP/Python/SQL/W3CSS, 1201개)는 전부 Topic_Programming 하위로 이동. - 에이전트 운영 상태(.astra/docs)는 그대로 유지, 콘텐츠 폴더만 정리. - Topic_Programming 최종 문서 수: 2784 → 3985.
5.3 KiB
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 |
|
B | 0.89 | 2026-06-23 | 2026-06-23 |
|
|
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).