CSS Specificity Breakdown Sampler
About this page
What to test
Open DevTools (Elements > Styles), inspect the colored target elements below, and hover over the CSS selectors in the Styles pane.
Stock DevTools: tooltip shows Specificity: (a,b,c)
Patched DevTools: tooltip shows backend-provided breakdown of which selector parts contribute to each component.
Important
Some examples intentionally resolve to (0,0,0) (for example universal selectors or :where(...) behavior). That is expected and useful for verification.
For a non-zero sanity check, inspect #target-id, .target-class, and div#complex-target.widget.
Specificity legend
| Component | Label in tooltip | Typical contributors |
|---|
| (a) | ID-like | #main, #nav |
| (b) | Class-like | .active, [type], :hover |
| (c) | Type-like | div, ::before |
Sampler: simple selectors
ID selector
#target-id
(1,0,0)
Target
Class selector
.target-class
(0,1,0)
Target
Type selector
p.type-target
(0,1,1)
Target
Attribute selector
[data-role="button"]
(0,1,0)
Target
Sampler: compound & complex selectors
ID + class + type
div#complex-target.widget
(1,1,1)
Target
Descendant combinator
div.sampler-el .target
(0,2,1)
Target
Multiple classes
.target-class.active
(0,2,0)
Target
Universal (no specificity)
* (via inherited color)
(0,0,0)
Target
Sampler: pseudo-classes & pseudo-elements
Pseudo-class :hover
.hover-demo:hover
(0,2,0)
Hover me
Pseudo-element ::first-line
.first-line-demo::first-line
(0,1,1)
This first line is styled.
This line is not.
Pseudo-element ::before
.before-demo::before
(0,1,1)
Content after
Functional :nth-child()
:nth-child(2n+1)
(0,1,0)
Odd child
Sampler: :is(), :not(), :where(), :has()
:is() -- takes argument specificity
:is(.sampler-el, .box) .is-target
(0,2,0)
Target
:not() -- takes argument specificity
:not(.excluded) .not-target
(0,2,0)
Target
:where() -- zero specificity
:where(.sampler-el) .where-target
(0,1,0)
Target
:has() -- takes argument specificity
.has-container:has(.has-child) .has-target
(0,3,0)
Target
Sampler: thread edge cases
:is() takes max argument specificity
:is(.foo, #edge-id).is-id-host
(1,1,0)
Target
:not() can carry ID-like weight
:not(#edge-never).not-id-arg
(1,1,0)
Target
:where() contributes zero
:where(#edge-zero).where-zero-target
(0,1,0)
Target
Sampler: nesting (&)
CSS nesting: & .nested-child
.nesting-parent .nested-child
(0,2,0)
Nested target
How to compare
Stock DevTools
Run with built-in DevTools to see the baseline tooltip:
devtools-demo 2 https://static.januschka.com/i-353436867/ stock
Patched DevTools (slot 2)
Run with your patched Chromium + frontend for backend-provided selector breakdown:
devtools-demo 2 https://static.januschka.com/i-353436867/
Explicit frontend override (if needed)
DEVTOOLS_FRONTEND_DIR=/home/chrome/chromium_2/devtools/devtools-frontend/out/Default/gen/front_end \
devtools-demo 2 https://static.januschka.com/i-353436867/