CSS Specificity Tutorial

In this section, we will learn about the specificity in CSS

Specificity in CSS

If you think about it, using CSS we create rules! For example, if element A was the child of element B then apply a set of styles to the element A! Or If an element has a class attribute with the value of ABC, then apply these styles; or if an element has an id attribute with the value of id-one then apply that style etc.

After that, browsers take these styles (rules) and figure out the places where each rule is applicable and based on these rules will render the pages.

But if there are two or more rules (styles) that apply to the same element, it is important to know which one takes precedence over the other.

This is where CSS Specificity comes in.

In short, browsers always look for and choose those styles that are more specific.

So CSS provides a formula that browsers can use in order to figure out which style is more specific than the other (As you’ll soon see, specificity, helps developers as well).

Based on this formula, the worthiness of the value we assign to a style’s selector is different if it is a tag selector or id selector or class selector etc.

CSS Hierarchy

Take a look at the table below:

In the table above, those selector types that have higher points, have higher priority as well.

For example, let’s say you have an element like:

<p id="p-id"> this is for test</p>

And there are two CSS styles to be applied to this element. The type of selector for each style is like this:

#p-id{
color:blue;
}
p{
color:red;
}

In this case the CSS style that has the #p-id for its selector will format the <p> element because as the table above showed, id selector has 100 points but tag selector has only 1 point.

Example: specificity in CSS

<!DOCTYPE html>
<html>
<head>
<title>CSS is fun :)</title>
<style type="text/css">
#p-id{
color:blue;
}
p{
color:red;
}
</style>
</head>
<body>
<p id="p-id">this is for test</p>
</body>
</html>

Be aware that these priorities only matters when two or more CSS styles target the same element/s and trying to override properties of each other.

If each style using different property/ies to style an element (for example one style wants to change the color property and another style formats the element using "border" property) in this case both styles will apply to the target element because no style tries to override properties of the other.

CSS Specificity with Multiple Selectors

The table below shows how using one or more selector can increase or decrease the priority of that style:

Note: Higher Total-points = Higher priority.

To explain a few selectors in the table above:

• The first selector is a tag and we know that based on the CSS
  formula, the worthiness of a tag is 1 point and that gives us the total
  points of 1. So the priority of this selector is 1.

• The next selector is a tag with the combination of a class-name.
  In this case, one point goes for the tag and 10 points goes for the
  class and that gives us the total points of 11. So the priority of this
  selector is 11

• The next selector is a single id. In this case, 100 points goes
  for id selector and the total points are 100. So the priority of this
  selector is 100.

As you can see, the more value assigned to a style’s selector, the more priority that style can get.

CSS Specificity and the Last Selector:

If there are two styles targeting the same element and the selectors for both styles have the same priority (let’s say because both styles used the tag-name as the value of the selector), in this situation the latter of the two styles takes the precedence.

Example: hierarchy CSS

<!DOCTYPE html>
<html>
<head>
<title>CSS is fun :)</title>
<style type="text/css">
h1{
color:red;
}
h1{
color:blue;
}
</style>
</head>
<body>
<h1>CSS is Fun</h1>
</body>
</html>

Priority of the two styles in the example above is the same but because the one with the value “blue” for the color-property came last, it’s the winner style and it will format <h1> element then.

Example: CSS specificity and the id attribute

<!DOCTYPE html>
<html>
<head>
<title>CSS is fun :)</title>
<style type="text/css">
#p-id{
color:blue;
}
p{
color:red;
}
</style>
</head>
<body>
<p id="p-id">this is for test</p>
</body>
</html>

In the example above, the style with id selector wins because it has a higher priority.

Example: specificity in CSS

<!DOCTYPE html>
<html>
<head>
<title>CSS is fun :)</title>
<style type="text/css">
#albert{
color:blue;
}
p.paragraph{
color:red;
border:double;
}
</style>
</head>
<body>
<p id="albert" class="paragraph">Imagination is more important than knowledge.</p>
</body>
</html>

In the example above, the two styles trying to override each other in terms of the value for the color property and the one with id selector is the winner because of the higher priority attached to an id selector. But the style that used p.paragraph as the value for its selector, has “border” property as well and because there’s no other styles with higher priority to set the value of this property, then the border’s value of this style will apply to the <p> element.

Example: CSS inline style and specificity

<!DOCTYPE html>
<html>
<head>
<title>CSS is fun :)</title>
<style type="text/css">
#albert{
color:blue;
}
</style>
</head>
<body>
<p id="albert" class="paragraph" style="color:red;">Imagination is more important than knowledge.</p>
</body>
</html>

As we mentioned in the first table, the priority of “inline style” is worth 1000 points. So in the example above the “inline style” of the <p> element is the winner because of its higher priority compared to the style with id selector.