Skip to main content

CSS Specificity

What is Specificity?​

If there are two or more CSS rules that point to the same element, the selector with the highest specificity value will "win", and its style declaration will be applied to that HTML element.

Think of specificity as a score/rank that determines which style declaration are ultimately applied to an element.

Before going in deep about specificity, let's discuss some points about it:

  • The CSS specificity is important only when various selectors are affecting the same element. In this case, the browser needs a way to identify the style to be applied to the matching element, and CSS specificity is the way of doing it.
  • When two or more selectors have equal specificity value, then the latest one considers.
  • Universal selectors (*) and the inherited values have lower specificity, i.e., 0 specificity.
  • The style property has a greater specificity value compare to the selectors (except the !important in the stylesheet selector).
  • The !important alter the selector specificity. When two selectors have equal specificity, then the selector having !important

Specificity hierarchy​

Every CSS selector has its place in the specificity hierarchy. There are mainly four categories that define the selector's specificity level:

  • Inline styles: It is directly attached to the element which is to be styled. For example: <p style="color: red;">. It has the highest priority.

  • IDs: It is a unique identifier for the elements of a page that has the second-highest priority. For example: #para.

  • Classes, attributes, and pseudo-classes: It includes classes, attributes, and pseudo-classes ( like :focus, :hover, etc.).

  • Elements and pseudo-elements: It includes the name of elements (div, h1) and pseudo-elements (like :after and :before). They have the lowest priority.

Example specifity

How to Calculate Specificity?​

Start at 0, add 100 for each ID value, add 10 for each class value (or pseudo-class or attribute selector), add 1 for each element selector or pseudo-element.

note

Inline style gets a specificity value of 1000, and is always given the highest priority!

note

There is one exception to this rule: if you use the !important rule, it will even override inline styles!

The table below shows some examples on how to calculate specificity values:

SelectorSpecificity ValueCalculation
p11
p.test111 + 10
p#demo1011 + 100
<p style="color: pink;">10001000
#demo100100
.test1010
p.test1.test2211 + 10 + 10
#navbar p#demo201100 + 1 + 100
*00 (the universal selector is ignored)

The selector with the highest specificity value will win and take effect!

Common cases​

Equal specificity: the latest rule wins​

If the same rule is written twice into the external style sheet, then the latest rule wins:

h1 {
    background-color: yellow;
}

h1 {
    background-color: red;
}

ID selectors have a higher specificity than attribute selectors​

Look at the following three code lines:

div#a {
    background-color: green;
}

#a {
    background-color: yellow;
}

div[id=a] {
    background-color: blue;
}

the first rule is more specific than the other two, and will therefore be applied.

Contextual selectors are more specific than a single element selector​

The embedded style sheet is closer to the element to be styled. So in the following situation:

h1 {
    background-color: yellow;
}

h1 {
    background-color: red;
}

the latter rule will be applied.

A class selector beats any number of element selectors​

a class selector such as .intro beats h1, p, div, etc.:

.intro {
    background-color: yellow;
}

h1 {
    background-color: red;
}

The universal selector (*) and inherited values have a specificity of 0​

The universal selector (*) and inherited values are ignored!

Table of Contents