CSS Foundations
CSS Specificity
Read selector weight correctly, avoid specificity battles, and know when source order breaks a tie. The lesson explains selector weight, special selector functions, tie-breaking by source order, and why !important is rarely the right first fix.
Specificity compares the selectors of declarations that have already reached the same cascade stage. It is a three-column weight-not a score where many element selectors can eventually overpower an ID.
Specificity becomes troublesome when selectors describe page structure instead of component intent. Long descendant chains are difficult to reuse and even harder to override. A small class selector, a predictable layer order, and zero-weight context supplied by :where() usually produce a stylesheet that can change without an escalating contest. This topic also connects with Cascade & Inheritance and CSS Pseudo Classes.
Specificity is compared in columns
Think of specificity as three columns: IDs; classes, attributes, and pseudo-classes; then element names and pseudo-elements. A value in a stronger column outweighs any number in a weaker one.
Example
css
#checkout .button { color: white; } /* 1-1-0 */
.panel .button { color: navy; } /* 0-2-0 */
button.primary { color: teal; } /* 0-1-1 */The first selector wins because it contains an ID. If two competing selectors have the same specificity, the declaration that appears later wins.
Selectors with special behavior
:where()always contributes zero specificity.:is(),:not(), and:has()take the specificity of their most specific argument.- Inline styles outrank normal author rules.
!importantreverses the normal layer and origin order; it should be reserved for deliberate overrides, not routine styling.
Keep selectors easy to override
Example
css
/* Component selector: small and predictable */
.notice { border-color: #cbd5e1; }
.notice--warning { border-color: #d97706; }
/* Zero-weight context condition */
:where(.sidebar) .notice { font-size: 0.925rem; }Specificity Reference
| Selector part | Weight | Example |
|---|---|---|
| ID selector | 1-0-0 | #notice |
| Class, attribute, or pseudo-class | 0-1-0 | .card, [open], :hover |
| Type selector or pseudo-element | 0-0-1 | article, ::before |
| :where() | 0-0-0 | :where(nav a) |
Complete Example
Run the complete document below in the Try It editor. Resize the preview or interact with the controls where the example calls for it.
Complete runnable example
html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Specificity example</title>
<style>
* { box-sizing: border-box; }
body {
margin: 0;
padding: 2rem;
font-family: system-ui, sans-serif;
line-height: 1.5;
}
main { max-width: 70rem; margin-inline: auto; }
article, section, aside, form, .card, .panel {
padding: 1rem;
border: 1px solid #cbd5e1;
border-radius: 0.6rem;
}
#checkout .button { color: white; } /* 1-1-0 */
.panel .button { color: navy; } /* 0-2-0 */
button.primary { color: teal; } /* 0-1-1 */
/* Component selector: small and predictable */
.notice { border-color: #cbd5e1; }
.notice--warning { border-color: #d97706; }
/* Zero-weight context condition */
:where(.sidebar) .notice { font-size: 0.925rem; }
</style>
</head>
<body>
<main class="sidebar"><section class="panel"><button class="button primary">Specificity test</button><div class="notice notice--warning">A low-specificity component notice</div></section></main>
</body>
</html>Browser Support
Feature | Chrome | Edge | Firefox | Safari |
|---|---|---|---|---|
| Selector specificity | 1 | 12 | 1 | 1 |
Versions show the first stable desktop release with unprefixed support. Data source: MDN Browser Compatibility Data 8.0.8. A partial-support note is included where it changes how the example behaves.
Notes
- If a selector needs another ID or another
!importantto win, step back and fix the cascade structure. - Test the example with real content, keyboard input, browser zoom, and the narrowest layout your project supports.
- Use a fallback when the support table shows that one of your required browsers predates the feature.
Conclusion
Keep specificity deliberately low and use source order or layers for planned overrides.
Before increasing selector weight, check whether the competing rules belong in different cascade layers or whether the component needs an explicit variant. Reserve !important for deliberate guarantees such as protected utility behavior or accessibility safeguards, and document why the exception exists.