ronutz

CSS specificity calculator

Paste one or more CSS selectors, or a whole stylesheet, and read each selector's specificity as the (A, B, C) triple of Selectors Level 4, every simple selector named with the column it adds to, the selectors ranked the way the cascade ranks them with ties called out, and the special cases spelled out: :where() counts for nothing, :is(), :not() and :has() take their most specific argument, :nth-child(of) adds its argument, the universal selector adds nothing, a repeated class counts twice, a legacy single-colon pseudo-element counts as one. With the reminder of the five things the cascade checks before specificity.

Web & HTTP
Documentation
Try

10 selectors. The most specific is .foo :is(.bar, #baz) at 1,1,0.

Each selector's specificity

rankselectorABCA,B,C
10*0000,0,0
9LI0010,0,1
8UL LI0020,0,2
7UL OL+LI0030,0,3
6H1 + *[REL=up]0110,1,1
5UL OL LI.red0130,1,3
4LI.red.level0210,2,1
3#x34y1001,0,0
2#s12:not(FOO)1011,0,1
1.foo :is(.bar, #baz)1101,1,0

A counts ID selectors; B counts class selectors, attribute selectors and pseudo-classes; C counts type selectors and pseudo-elements. The universal selector counts for nothing. Specificities compare column by column, A first (Selectors Level 4).

Piece by piece

  1. 1*0,0,0
    * 0
    • *: the universal selector is ignored when counting (Selectors Level 4).
  2. 2LI0,0,1
    LI C
  3. 3UL LI0,0,2
    UL C(descendant)LI C
  4. 4UL OL+LI0,0,3
    UL C(descendant)OL C+LI C
  5. 5H1 + *[REL=up]0,1,1
    H1 C+* 0[REL=up] B
    • *: the universal selector is ignored when counting (Selectors Level 4).
  6. 6UL OL LI.red0,1,3
    UL C(descendant)OL C(descendant)LI C.red B
  7. 7LI.red.level0,2,1
    LI C.red B.level B
  8. 8#x34y1,0,0
    #x34y A
  9. 9#s12:not(FOO)1,0,1
    #s12 A:not(FOO) C
    • :not(FOO): the specificity of :not() is that of the most specific selector in its argument list; the negation changes nothing.
  10. 10.foo :is(.bar, #baz)1,1,0
    .foo B(descendant):is(.bar, #baz) A
    • :is(.bar, #baz): the specificity of :is() is that of the most specific selector in its argument list.

What the cascade checks before specificity

Specificity decides only when everything above it is equal. CSS Cascading and Inheritance Level 5 sorts declarations by these criteria, in descending order of priority:

  1. Origin and importance: transitions first, then important user-agent, important user, important author, animations, normal author, normal user, normal user-agent declarations. An !important author declaration beats every normal one regardless of selector.
  2. Context: between shadow-tree contexts, the outer context wins for normal declarations and the inner one for important declarations.
  3. Element-attached styles: a style attribute beats any style rule of the same importance.
  4. Cascade layers: for normal declarations the last layer wins, for important ones the first; declarations outside any layer sit in an implicit final layer.
  5. Specificity: the triple compared here. Each declaration has the specificity of its rule's selector.
  6. Order of appearance: the last declaration in document order wins, with style attributes placed after every style sheet.

The calculator reads selector syntax, not a document: it cannot know whether a selector matches anything, and a selector list is ranked by its own members, while in a real match the specificity in effect is that of the most specific member that matches. Namespaces are read but not resolved. The counting follows Selectors Level 4 (Working Draft, 22 January 2026) and the cascade order follows CSS Cascade Level 5; both are cited under Sources.

API endpointGEThttps://ronutz.com/api/v1/css-specificity-calculatorDocumented, not served. Opens the specification.

Referenties