CSS: specificity (selector priority)

What is specificity?

CSS specificity is a system to determine which CSS selector has priority, when style rules clash.

• Multiple selectors match the same element.
• They specify the same property. E.g. color
• Their CSS Cascade origin or layer is a tie.

Example. CSS Rule Conflict

<p id="id8480" class="xclass">what color am i</p>

#id8480 {
 color: green;
}

p {
 color: red;
}

.xclass {
 color: blue;
}

Specificity score

Specificity Score is three numbers, written as (a,b,c) . Each number is the count of matches for a specific type of selector.

1. (1,0,0) for ID selector e.g. #x1722
2. (0,1,0) for
   • class selector (.x)
   • attribute selector ([])
   • pseudo-class selector (:)
   e.g. .nav, [type="text"], :hover
3. (0,0,1) for
   • type selector (tag name)
   • pseudo-element selector (::)
   e.g. p, div, ::before

Specificity Comparison

left-most number has the highest priority. e.g. 1,0,0 ≻ 0,9,0

Example of specificity of common selectors

Example of computing specificity

suppose we have

div.x li {
 color: red;
}

• There are 2 tag name selectors, div and li, together has specificity (0,0,2)
• There is one class selector .x, it has specificity (0,1,0)
• Together, their sum is (0,1,2)

Example. Multiple Classes vs ID

/* specificity score (1,0,0) */
#sidebar {
 color: red;
}

/* 
specificity score (0,2,1)
this is a descendant combinator.
its specificity is the sum of its operands
*/
.sidebar .box p {
 color: blue;
}

Specificity of special selectors

combinators

for combinators, their specificity is the sum of their operands.

For example div p has specificity of (0,0,2).

• CSS: combinator selectors

universal selector *

specificity is 0.

• universal selector (*)

:where selector

specificity is 0.

• CSS: :where selector (is any of)

:is :has :not seletors

the specificity of :not(arg), :is(arg), :has(arg), is highest specificity of its argument.

• CSS: :has descendant selector
• CSS: :is any of selector
• CSS: :not negation selector