CSS Specificity

What is specificity?

If there are two or more conflicting CSS rules pointing to the same element, the browser will follow some principles to determine which one is the most specific and therefore wins.

View specificity (specificity) as a score/rating that can determine which style declarations are ultimately applied to the element.

Universal selectors (* have lower specificity, while ID selectors have higher specificity!

Note:This specificity is a common reason why CSS rules do not apply to certain elements, even though you might think they should.

Specificity hierarchy

Each selector has its position in the specificity hierarchy. The following four categories define the specificity level of selectors:

Inline styles - Inline (inline) styles are directly attached to the element to be styled. Example: <h1 style="color: #ffffff;">.

ID - IDs are unique identifiers for page elements, such as #navbar.

Classes, attributes, and pseudo-classes - This category includes .classes, [attributes], and pseudo-classes, such as :hover, :focus, etc.

Elements and pseudo-elements - This category includes element names and pseudo-elements, such as h1, div, :before, and :after.

How to calculate specificity?

Please remember the method of calculating specificity!

Starting from 0, add 1000 for the style attribute, 100 for each ID, 10 for each attribute, class, or pseudo-class, and 1 for each element name or pseudo-element.

Please consider the following three code snippets:

Example

A: h1
B: #content h1
C: <div id="content"><h1 style="color: #ffffff">Heading</h1></div>
  • A's specificity is 1 (one element)
  • B's specificity is 101 (one ID reference and one element)
  • C's specificity is 1000 (inline style)

Since 1 < 101 < 1000, the third rule (C) has higher specificity and will be applied.

Specificity Rule 1:

In cases of equal specificity: the latest rule is important - If the same rule is written twice in an external stylesheet, the rule that comes later in the stylesheet is closer to the element to be styled, so it will be applied:

Example

h1 {background-color: yellow;}
h1 {background-color: red;}

Try It Yourself

The subsequent rule always applies.

Specificity Rule 2:

ID selectors have higher specificity than attribute selectors - Please see the following three lines of code:

Example

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

Try It Yourself

The first rule is more specific than the other two, so it will be applied.

Specificity Rule 3:

Contextual selectors are more specific than single element selectors - Inline styles are closer to the element they are meant to style. So in the following cases:

Example

From an external CSS file:

#content h1 {background-color: red;}

In the HTML file:

<style>
#content h1 {
  background-color: yellow;
}
</style>

The next rule will apply.

Specificity Rule 4:

Class selectors will override any number of element selectors - Class selectors (such as .intro) will override h1, p, div, and others:

Example

.intro {background-color: yellow;}
h1 {background-color: red;}

Try It Yourself

Additionally,Universal Selectors and Inherited Values Have a Specificity of 0 Specificity of * and body *, and similar have a specificity of 0. The inherited values also have a specificity of 0.