koriweb
9609c04755
W3Schools 튜토리얼을 P-Reinforce v3.1 포맷으로 위키화(영어 본문, 한/영 섹션 헤더). - Topic_HTML: 59문서 (튜토리얼+예제, 레퍼런스/메타 제외) - Topic_CSS: 190문서 (메인 + Advanced/Flexbox/Grid/RWD 전체) - Topic_JavaScript: 120문서 (코어 언어; Temporal/DOM상세/BOM/WebAPI/AJAX/jQuery/Graphics 등은 후속) 각 폴더 00_INDEX.md(MOC) 포함. 코드 verbatim, 미확인분은 "Not found in source" 표기. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
143 lines
5.2 KiB
Markdown
143 lines
5.2 KiB
Markdown
---
|
|
id: css-specificity
|
|
title: "CSS Specificity"
|
|
category: "Frontend"
|
|
status: "draft"
|
|
verification_status: "conceptual"
|
|
canonical_id: ""
|
|
aliases: ["specificity", "CSS specificity algorithm", "selector specificity", "specificity weight", "which CSS rule wins"]
|
|
duplicate_of: ""
|
|
source_trust_level: "B"
|
|
confidence_score: 0.9
|
|
created_at: 2026-06-23
|
|
updated_at: 2026-06-23
|
|
review_reason: ""
|
|
merge_history: []
|
|
tags: ["css", "web", "frontend", "w3schools", "specificity", "selectors", "cascade"]
|
|
raw_sources: ["https://www.w3schools.com/css/css_specificity.asp"]
|
|
applied_in: []
|
|
github_commit: ""
|
|
---
|
|
|
|
# [[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
|
|
<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
|
|
<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
|
|
<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
|
|
<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):
|
|
```html
|
|
<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).
|