---
title: "Specificity"
slug: "specificity"
category: "glossary"
tags: ["glossary", "css", "specificity", "cascade", "selectors", "frontend"]
status: "stable"
last_updated: 2026-08-14
summary: "CSS specificity is the weight calculation that determines which rule wins when two rules target the same element and the same property."
related:
  [
    "[[glossary/cascade]]",
    "[[glossary/custom-property]]",
    "[[glossary/has-selector]]",
    "[[frontend/css]]",
    "[[cheatsheets/css-selectors]]",
  ]
---

## Overview

This page is the atomic definition. The full cascade and CSS rules live at [[frontend/css]].

## Definition

Specificity is the numeric weight assigned to a CSS selector; when two rules declare the same property on the same element, the rule with the higher specificity wins. The weight is expressed as three columns: (A, B, C). A counts ID selectors (`#nav`). B counts class selectors, attribute selectors, and pseudo-classes (`.active`, `[type="text"]`, `:hover`). C counts type selectors and pseudo-elements (`p`, `::before`). The universal selector `*`, combinators, and the `:where()` pseudo-class contribute zero specificity. Inline styles are treated as a fourth column (1, 0, 0, 0) and always beat external or `<style>` rules. `!important` overrides specificity entirely, but two `!important` declarations fall back to specificity to resolve conflict.

Numerical comparison: `(0, 1, 0)` beats `(0, 0, 10)` because columns are compared left to right, not summed.

## When it applies

Apply specificity thinking whenever a rule fails to override another. Before reaching for `!important`, reduce the winning selector or raise the losing one. Prefer [[glossary/custom-property|custom properties]] and utility classes (low specificity) over deeply nested selectors. Use `:is()` for grouping selectors without inflating specificity, or `:where()` to group at zero cost.

## Example

```css
/* Specificity (0, 1, 0) */
.card { color: blue; }

/* Specificity (0, 1, 1) -- wins because B+C > B */
.card p { color: red; }

/* Specificity (1, 0, 0) -- wins over both because A > 0 */
#sidebar { color: green; }
```

A button styled by a component library rule `.btn-primary` (specificity `(0,1,0)`) will be overridden by a page-level `.nav .btn-primary` rule (specificity `(0,2,0)`) even though the intent was to use the component default. Lower the library selector or reset it with `:where(.btn-primary)`.

## Related concepts

- [[glossary/cascade]] - specificity is one input to the cascade; source order and origin are others.
- [[glossary/custom-property]] - custom properties inherit through the cascade, not specificity.
- [[glossary/has-selector]] - the `:has()` pseudo-class has specificity equal to its argument.
- [[frontend/css]] - the authoritative deep-dive on CSS rules.
- [[cheatsheets/css-selectors]] - quick lookup for selector syntax and specificity weights.

## Citing this term

> See [[glossary/specificity|Specificity]] (llmbestpractices.com/glossary/specificity).

## Related

- [[glossary/cascade]]
- [[glossary/custom-property]]
- [[glossary/has-selector]]
- [[frontend/css]]
- [[cheatsheets/css-selectors]]