Files

T

Antigravity Agent e9cbf23ab5 docs(10_Wiki): Dev 폴더 누락분 반영 — Topic_Programming으로 통합

이전 재구성 작업에서 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.

2026-07-05 00:39:13 +09:00

5.2 KiB

Raw Blame History

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

title

CSS Specificity

🎯 한 줄 통찰 (One-line insight)

Specificity is the algorithm that decides which CSS declaration wins when multiple rules target the same element — the declaration with the highest specificity is the one that gets applied. [S1]

🧠 핵심 개념 (Core concepts)

Specificity = the deciding algorithm — when more than one rule applies to an element, the browser uses specificity to determine which style declaration is ultimately applied. [S1]
Highest specificity wins — among competing declarations, the one with the highest specificity "wins", and that style is applied to the HTML element. [S1]
Selector types differ in weight — element selectors, class selectors, ID selectors, and inline styles carry increasing specificity in that order. [S1]

🧩 추출된 패턴 (Extracted patterns)

Escalation pattern — adding a more specific selector (element → class → id → inline) overrides a less specific one targeting the same element. [S1]
Color-override demonstration — the canonical teaching pattern stacks p, .test, #demo, and an inline style on one paragraph to show each level overriding the previous. [S1]

📖 세부 내용 (Details)

What specificity is. CSS specificity is an algorithm that determines which style declaration is ultimately applied to an element. When multiple CSS rules target the same element, the declaration with the highest specificity will "win", and that style will be applied to the HTML element. [S1]

Example — element selector (red). A red color is specified for <p> elements. Result: the text will be red. [S1]

<html>
<head>
  <style>
    p {color: red;}
  </style>
</head>
<body>

<p>Hello World!</p>

</body>
</html>

Example — class selector (green). A class selector named "test" is added with a green color. Result: the text will be green, because the class selector has higher specificity than the element selector. [S1]

<html>
<head>
  <style>
    .test {color: green;}
    p {color: red;}
  </style>
</head>
<body>

<p class="test">Hello World!</p>

</body>
</html>

Example — id selector (blue). An id selector named "demo" is added. Result: the text will be blue, because the id selector has higher specificity than the class selector. [S1]

<html>
<head>
  <style>
    #demo {color: blue;}
    .test {color: green;}
    p {color: red;}
  </style>
</head>
<body>

<p id="demo" class="test">Hello World!</p>

</body>
</html>

Example — inline style (pink). An inline style is added for the <p> element. Result: the text will be pink, because the inline style has the highest specificity. [S1]

<html>
<head>
  <style>
    #demo {color: blue;}
    .test {color: green;}
    p {color: red;}
  </style>
</head>
<body>

<p id="demo" class="test" style="color: pink;">Hello World!</p>

</body>
</html>

🛠️ 적용 사례 (Applied in summary)

The four stacked examples on the page are the applied demonstrations: the same paragraph is styled successively redder/greener/bluer/pinker as each higher-specificity selector is added, proving the "highest specificity wins" rule. No external project/commit applications found in the source.

💻 코드 패턴 (Code patterns)

Specificity escalation on a single element (language: HTML/CSS):

<style>
  p {color: red;}        /* element  — lowest */
  .test {color: green;}  /* class    — higher */
  #demo {color: blue;}   /* id       — higher still */
</style>
<p id="demo" class="test" style="color: pink;">Hello World!</p>
<!-- inline style wins: text is pink -->

⚖️ 모순 및 업데이트 (Contradictions & updates)

No contradictions found in the source.

✅ 검증 상태 및 신뢰도

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

🔗 지식 그래프 (Knowledge Graph)

상위/루트: CSS Tutorial
관련 개념: CSS Specificity Hierarchy, CSS !important, CSS Selectors
참조 맥락: Consulted whenever two or more CSS rules conflict on the same element and you need to know which one applies.

📚 출처 (Sources)

[S1] W3Schools — CSS Specificity — https://www.w3schools.com/css/css_specificity.asp

📝 변경 이력 (Change history)

2026-06-23: Initial draft synthesized from the W3Schools "CSS Specificity" page (Astra wiki-curation, P-Reinforce v3.1 format).

5.2 KiB Raw Blame History