CSS Rules Prioritization (Specificity)

Expert

(, )

By SamK

Category(s)

Web Design

Web Development

Topic(s)

CSS

CSS rules are prioritized based on different criteria. This behavior is also called specificity.

When multiple CSS rules target the same element, the rule with the highest specificity takes precedence, and its style is applied.

Specificity acts like a ranking system to decide which style declaration will be used on an element.

Specificity Hierarchy

Every CSS selector has a specific position in the specificity hierarchy.

There are four categories that define the specificity level of a selector:

Inline styles - Example: <h1 style="color: pink;">
IDs - Example: #navbar
Classes, pseudo-classes, and attribute selectors - Examples: .test, :hover, [href]
Elements and pseudo-elements - Example: h1, ::before

Note: Inline styles always receive the highest priority. There is one exception: if you use the !important rule, it can override even inline styles. Click here to learn more.

The selector with the highest specificity value will prevail and be applied!

Example 1

In this example, we used the <p> element as the selector and:

set its color to blue in CSS using the <style> tag in the head section of the HTML page
and also specified color: green inside the style attribute of the <p> element.

<html>
<head>
  <style>
    p {color: blue;}
  </style>
</head>
<body>

<p>This is a paragraph 1.</p>
<p style="color:green">This is a paragraph 2.</p>

</body>
</html>

As a result, the first paragraph will be will be blue and the second paragraph will be green, because specificity of inline styles is more than the specificity of CSS class selectors, as shown below.

Example 1 Demo

Example 2

In this example, we added a class selector named test and set its color to blue. We have also assigned a green color to the p selector.

<html>
<head>
  <style>
    .test {color: blue;}
    p {color: green;}
  </style>
</head>
<body>

<p class="test">This is a pparagraph.</p>

</body>
</html>

The text will be blue, because the class selector has higher priority, as shown below.

Example 3

In this example, we added an ID selector named demo and set its color to blue. We also added a class selector named test and a p selector and set their color properties to green and red respectively.

<html>
<head>
  <style>
    #demo {color: blue;}
    .test {color: green;}
    p {color: red;}
  </style>
</head>
<body>

<p id="demo" class="test">This is a paragraph.</p>

</body>
</html>

The text will be blue, because the ID selector has the higher priority in this case, as shown below.

More Prioritization Rules

Equal specificity: the most recent rule wins. If the same rule appears multiple times in an external stylesheet, the latest one will take precedence.
More specific rule has a higher priority. For example div#a is more specific than #a, so it will have a higher priority
ID selectors have higher specificity than attribute selectors.
Contextual selectors have higher specificity than a single element selector. Because the embedded style sheet is closer to the element being styled, it takes precedence.
A class selector has higher specificity than any number of element selectors. For example, a class selector like .intro will override h1, p, div, and so on.
The universal selector (*) and inherited values have a specificity of 0. So they are effectively ignored in terms of specificity.