HTML CSS JAVASCRIPT MySQL PHP JQUERY LIQUID

CSS Specificity

❮ Previous Next ❯

What is Specificity?

When you have multiple CSS rules targeting the same thing, the one with the most specific selector will be the winner. It means that the style from the most specific rule will be used for that HTML element.

Consider specificity as a way to rank and decide which style rule should be used for an element.

Take a look at these examples:

Example 1

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

<p>Hello World!</p>

</body>
</html>

Try it Yourself »

Now, look at example 2:

Example 2

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

<p class="test">Hello World!</p>

</body>
</html>

Try it Yourself »

Now, look at example 3:

Example 3

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

<p id="demo" class="test">Hello World!</p>

</body>
</html>

Try it Yourself »

Now, look at example 4:

Example 4

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

<p id="demo" class="test" style="color: pink;">Hello World!</p>

</body>
</html>

Try it Yourself »

Specificity Hierarchy

Each CSS selector holds a position in the order of importance.

There are four groups that tell us how specific a selector is:

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

How to Calculate Specificity?

Remember the process for calculating specificity!

Begin with 0, increase by 100 for every ID value, increase by 10 for every class value (or something like :hover or [data-attribute]), and increase by 1 for every element selection or something like ::before.

Note:"Inline style has the highest priority, with a specificity value of 1000!

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

Here is a table that demonstrates how to figure out specificity values:

Selector Specificity Value Calculation
p 1 1
p.test 11 1 + 10
p#demo 101 1 + 100
<p style="color: pink;"> 1000 1000
#demo 100 100
.test 10 10
p.test1.test2 21 1 + 10 + 10
#navbar p#demo 201 100 + 1 + 100
* 0 0 (the universal selector is ignored)

The selector with the greatest specificity wins and applies its style!

Think about these three pieces of code:

Example

A: h1
B: h1#content
C: <h1 id="content" style="color: pink;">Heading</h1>

The A element has a specificity of 1, which means it is a basic selector.
The B element has a specificity of 101, indicating it has one ID reference and one element selector.
The C element has a specificity of 1000 due to inline styling.

Because the third rule (C) has the highest importance score (1000), this particular style declaration will be enforced.

More Specificity Rules Examples

Same Importance: The Most Recent Rule Takes Priority - When a rule is repeated in an external style sheet, the one written last will be the one followed.

Example

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

Try it Yourself »

ID selectors are more specific than attribute selectors - Let's examine these three lines of code:

Example

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

Try it Yourself »

The initial rule is more detailed than the other two, so it will be used.

Contextual selectors are like super-specific selectors, way more targeted than just picking one element. Imagine an embedded style sheet snuggling up close to the element it wants to style. Now, consider this scenario:

Example

From external CSS file:
#content h1 {background-color: red;}

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

The second rule will be enforced.

In HTML and CSS, when you use a class selector (like .intro), it's more powerful than using individual element selectors (like h1, p, div, etc.). So, if you want to style something, using a class selector is a better choice.

Example

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

Try it Yourself »

In simple terms, when we talk about the universal selector (*) and inherited values in web design, they don't carry much importance. They are essentially ignored or given zero priority.
❮ Previous Next ❯