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:

Selector Type	Example	Worth
Tag	p { }	1 point
Class	.class-name { }	10 points
Id	#id-name { }	100 points
Pseudo-Element	::first-line	1 point
Pseudo-Class	:hover	10 points
Inline style	<p style=”color:red”>	1000 points

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

See the Pen specificity in CSS by Enjoy Tutorials (@enjoytutorials) on CodePen.

Be aware that these priorities only matter 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.

Selector	Id	Class	Tag	Pseudo-element	Pseudo-class	Total points
li			1			1
p.cat		10	1			11
#ul	100					100
#price p.class-name	100	10	1			111
#id1 #id2 #id3	300					300
#id1 .animal	100	10				110
p::first-line			1	1		2
#user:hover	100				10	110
ul li			2			2

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

See the Pen hierarchy CSS by Enjoy Tutorials (@enjoytutorials) on CodePen.

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

See the Pen CSS specificity and the id attribute by Enjoy Tutorials (@enjoytutorials) on CodePen.

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

Example: specificity in CSS

See the Pen specificity in CSS by Enjoy Tutorials (@enjoytutorials) on CodePen.

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 style 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

See the Pen CSS inline style and specificity by Enjoy Tutorials (@enjoytutorials) on CodePen.

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.