What is CSS specificity?

CSS specificity is a weight assigned to a CSS selector that determines which rule is applied when multiple rules target the same element. It's calculated as a three-part value (A, B, C): A counts ID selectors (most powerful), B counts class/attribute/pseudo-class selectors, and C counts element type and pseudo-element selectors. The selector with the highest total wins.

Why does (1,0,0) always beat (0,9,9)?

CSS specificity is not a simple decimal number — it's compared column by column from left to right. One ID (1,0,0) always beats any number of classes (0,9,9) because the A column is compared first. Think of it like version numbers: 1.0.0 > 0.9.9 even though 100 > 99 in regular math.

Does !important affect specificity?

!important is not a selector and does not change the (A,B,C) score. Instead, it creates a separate override layer that ignores specificity entirely. Inline styles also sit outside the normal specificity system — they have an effective (1,0,0,0) weight that overrides all stylesheet rules. Avoid using !important for maintainability.

What is the specificity of :not(), :is(), and :where()?

:not() itself adds no specificity, but the selectors inside it do. :is() uses the highest specificity of its argument list. :where() always has zero specificity — it's designed specifically for low-specificity matching, making it useful in utility-first CSS systems.

How can I reduce specificity wars in my CSS?

Common strategies include: using classes instead of IDs for styling, avoiding deeply nested selectors, keeping specificity flat with utility-first frameworks (Tailwind), using :where() for reusable base styles, and following a naming convention like BEM to keep selectors at a single class level (0,1,0).

CSS-Spezifitätsrechner

CSS-Selektor-Spezifität berechnen und vergleichen. Sehen Sie sofort die (A,B,C)-Aufschlüsselung, visualisieren Sie mit Balkendiagrammen und verstehen Sie, welcher Selektor bei Konflikten gewinnt.

CSS-SelektorenEin Selektor pro Zeile

Schnellbeispiele:

Wie CSS-Spezifität funktioniert:

A — ID-Selektoren (#id): jeder zählt 100

B — Klasse (.cls), Attribut ([attr]), Pseudo-Klasse (:hover): jeder zählt 10

C — Typ-Elemente (div, p), Pseudo-Elemente (::before): jeder zählt 1

Anleitung

CSS-Selektor-Spezifität berechnen und vergleichen. Sehen Sie sofort die (A,B,C)-Aufschlüsselung, visualisieren Sie mit Balkendiagrammen und verstehen Sie, welcher Selektor bei Konflikten gewinnt.

1Type or paste one or more CSS selectors — one per line.
2Click the quick-example buttons to add common selectors instantly.
3Click 'Calculate' (or press Ctrl+Enter) to see the specificity scores.
4Each result shows an (A,B,C) badge, a numeric total, and bar charts for visual comparison.
5Click 'Show breakdown' on any result to see which parts contributed to the score.

Funktionen

Calculates (A,B,C) specificity breakdown for any CSS selector
Compare multiple selectors side by side, sorted by specificity
Visual bar charts for instant comparison of A, B, C values
Detailed breakdown explaining each contributing selector part
Handles IDs, classes, attributes, pseudo-classes, and pseudo-elements

Häufig gestellte Fragen

Mehr erfahren

CSS Specificity Explained: How to Debug and Win Selector Conflicts