Mastering CSS Specificity

CSS Specificity is one of the most confusing concept in Cascading Style Sheets and that’s the main reason, many Front End Developers avoid this for as long as possible.

Specificity is a weight that is applied to a given CSS declaration and is determined by the number of each selector type in the matching selector.

Basically, it’s a mechanism within the CSS cascade, which helps browsers in conflicts resolution. Suppose, you have two (or more) conflicting CSS rules that are being applied to the same element, then there are going to be some basic rules which a browser will follow to determine which one is most specific and that particular CSS declaration will win.

Let’s start with some basic examples.

Example 1

p{ color: red;}
p{color:blue;}

Here, the color of paragraph text will be blue as it came last in the style sheet and will override the above  p declaration.

Example 2

<p class="text-red">text here</p>
.text-red{color: red;}
p{ color: blue }

In this example, it might seem that  paragraph text  would be colored blue, as the declaration to color p text blue comes last, but  paragraph text would actually be colored red due to the specificity of the first selector. Here, the specificity weight of first selector is 10, while specificity weight of second selector 1. Hence, the preference will be given to first selector.

Specificity Ranking.

Every selector has been given a particular rank. Inline style lies on top, whereas elements and pseudo elements lies in bottom.

Inline styles > IDs > Classes and pseudo-classes > Elements and pseudo-elements

How to calculate specificity ?

To find the actual specificity of a group of nested selectors takes some calculation. Basically, every inline style has a specificity of 1000, every ID selector has a value of 100, every class selector has a value of 10 and every elements and pseudo elements  has a value of 1. Finally, we add them up to get the specificity weight.

Examples: –

• a has a specificity of 1 (1 element selector)
• div p has a specificity of 2 (2 element selectors, 1+1)
• .active has a specificity of 10(1 class selector)
• #nav has a specificity of 100 (1 id selector)
• #nav li.active a has a specificity of 112 (1 id selector + 1 class selector + 2 elements selector)

Some Key Points

a) In case of conflicting styles declaration, the declaration with higher specificity will win regardless of order.
b) Always try to use IDs to increase the specificity as its specificity is 100.
c) The universal selector (*) has no specificity value.
d) Pseudo-classes has specificity of 10 while pseudo-elements (e.g. :first-line) has a specificity of 1.
e) The pseudo-class :not() adds no specificity by itself, only elements inside its parenthesis will add to specificity weight.
g) When an !important rule is used on a style declaration, it will override any other declarations.
h) The only way an !important value can be overridden is with another !important rule declared later in the CSS and with equal or great specificity value .

Happy coding  🙂