CSS Selectors

Enter selectors (one per line) to compare.

1

Specificity Ranking

Inline (1,0,0,0)
ID (0,1,0,0)
Class/Attr/Pseudo (0,0,1,0)
Element (0,0,0,1)
!important
📊

Enter CSS selectors and click Analyze to see specificity comparisons.

Specificity Quiz

Test your CSS knowledge. Which selector will win?

Score: 0/0
Streak: 0 🔥
<div id="hero" class="banner primary">
  Hello World
</div>

Which selector has higher specificity?

How is CSS Specificity Calculated?

1,0,0,0

Inline Styles

Styles applied directly to an element via the style attribute.

<div style="color: red;">
0,1,0,0

IDs

ID selectors match elements with the specified ID.

#header, #hero-btn
0,0,1,0

Classes, Attributes & Pseudo-classes

Class selectors, attribute selectors, and pseudo-classes.

.button, [type="text"], :hover
0,0,0,1

Elements & Pseudo-elements

Type selectors and pseudo-elements.

h1, div, p, ::before
!important

The Override Rule

An !important declaration overrides normal specificity, except against another !important with higher specificty.

color: red !important;
0,0,0,0

Ignored Selectors

The universal selector (*) and combinators (+, >, ~, ) have no effect on specificity.

*, body > p