CSS Foundations

CSS Specificity

Written by Swapnil RajaPublished 30 Jul 2026

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.
!important reverses 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 !important to 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.

PreviousCascade & Inheritance NextCSS Units