--- 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 `

` elements. Result: the text will be red. [S1] ```html

Hello World!

``` **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

Hello World!

``` **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

Hello World!

``` **Example β€” inline style (pink).** An inline style is added for the `

` element. Result: the text will be pink, because the inline style has the highest specificity. [S1] ```html

Hello World!

``` ## πŸ› οΈ 적용 사둀 (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

Hello World!

``` ## βš–οΈ λͺ¨μˆœ 및 μ—…λ°μ΄νŠΈ (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).