• 0-0-0: Global selector
• 0-0-1: Type Selector (Elements & pseudoelements)
• 0-1-0: Class selector (Also attribute selector & pseudoclass)
• 1-0-0: ID selector

• 1-0-0-0: inline styles
• 1-0-0-0-0:

  !important

  (on value)

body.blue div#someId a#otherId.classy {
  color: blue; }
#myPage #someId article.home p.important a {
  color: red; }

1. How many IDs in the selector?
2. How many class, attribute and pseudoclasses?
3. How many type/element or pseudo-elements?

2-X-X
X-2-X
X-X-3

The * selector, or global selector, has a specifity of 0.

Combinators, like ~, >, spaces, and + have no value

ul li {} 0-0-2
ul > li {} 0-0-2

:not has no value, but parameter selector does

.myClass:not(p) {} 0-1-1

Specificity is not inheritance

p#myP.important { 
  color: red !important;
}
a {
  color: purple;
}

<p class="important" id="myP">Paragraph with a <a href="x.html">link</a></p>

Paragraph with a link

Styles for a directly targeted element take precedence over inherited styles regardless of inherited specificity.

:not(a, .b, #c)

:not(a, .b, #c)

:is(a, .b, #c)

:where(a, .b, #c)

:nth-child(-n + 3 of a.b#c) /* 1-2-1 */

Hacking specificity

.disabled {cursor: default !important;}
p.btn {cursor: pointer;}

v.

.disabled.disabled.disabled {cursor: default;}
p.btn {cursor: pointer;}

#TheirWidget {background-color: blue !important;}
#3rdPartyWidget {background-color: white;}

#TheirWidget#TheirWidget {background-color: blue ;}
#3rdPartyWidget {background-color: white;}

a:not(#idDoesNotExist#idDoesNotExist#idDoesNotExist) 

1. Transition declarations
2. Important user agent declarations
3. Important user declarations
4. Important author declarations
5. Animation declarations
6. Normal author declarations
7. Normal user declarations
8. Normal user agent declarations

When multiple declarations have equal specificity, the last declaration found in the CSS is applied to the element.

There are extensions that enable you to see the weight of a selectors. But, by default, you can inspect which property value has won out and which selectors lost the specifity battle in the computed section in DevTools, but the selectors are ordered in specifity order.

• The Rules show the cascade by crossing out properties that were overwritten
• The computed styles show the final value impacting the selected element, with all values / selectors that were deprioritized.

Next ➹

• Original definition: https://www.w3.org/TR/CSS1/#cascading-order
• CSS2: https://www.w3.org/TR/CSS2/cascade.html#specificity
• CSS3: https://drafts.csswg.org/selectors-3/#specificity
• CSS4: https://drafts.csswg.org/selectors-4/#specificity
• SpeciFISHity.com