The first C of CSS : Cascading Style Sheets, highlights us the importance of Cascade in CSS. This can be a tricky part while learning, for the beginners. So let us try to understand what is Cascade and the role of Specificity in this article.

Cascade is the process, or algorithm, that decides the order in which properties are applied to elements in the websites we design. It connects CSS rules that are defined in various places. At points, it resolves the conflicts in code as well.

To understand this further, we have to think about some basic mechanisms related to a page loading. Normally, we have only one CSS file loaded in our page, but there will always be one more CSS file that is going to be a part of the process, which is the browser CSS. Browsers come with a default set of rules, and they differ between browsers and they also apply some default styling to the site. All these come into play while rendering the page. So in such a scenario, two or more competing CSS rules defining the same property, applied to the same element, need to be considered according to the CSS spec, to finalize which one should be applied.

To accomplish this, Cascade mainly focuses on 4 aspects in the code :

1. Specificity
2. Importance
3. Inheritance
4. Order

Let's dive into Specificity in this article.

SPECIFICITY

What happens when an element is targeted by multiple rules, with different selectors, that target the same property? Look at the following example :

In this example, the color property is defined twice for the same class, '.main-heading' So, when 2 or more rules are defined for the same property on the same element, with different selectors, Which rule will take precedence? This problem is solved by Specificity. "The more specific rule will win." If two or more rules have the same specificity, the one that appears last will be applied.

How to calculate specificity?

We can use a convention to calculate the specificity. There are 4 slots to indicate the specificity, and each one of them starts at 0 : 0 0 0 0 The slot at the left is the most important, and the one at the right is the least important.

Slot1

The first slot/the rightmost slot, is the least important. This value is increased for an element selector (HTML tags). If there are more than one element selector, the value stored in this slot will increased to that number of elements.

Slot 2

The second slot is affected by 3 things:

• class selectors
• pseudo-class selectors
• attribute selectors

When a rule contains one of these selectors, the value of the second column from the right is increased.

Note : Slot 2 selectors can be combined with slot 1 selectors:

Slot 3

Slot 3 holds an important thing that can affect your CSS specificity, that is the ID. As you may already know, HTML elements can have unique id attributes assigned, that can be used in the stylesheet to target the particular element.

Slot 4

Slot 4 is changed according to the inline styles. Any inline style will take precedence over any other rule defined in an external CSS file, or inside the style tag in the page header. There is only one exception, that is when !important is used.

!importance

Specificity does not matter if a rule ends with !important:

That rule will take precedence over any rule with more specificity You can add !important to any CSS rule to make that rule more important than any other rule. The only way another rule can take precedence is, having !important as well, and have higher specificity in the other slots.

Tools to calculate the specificity

You can use the site specificity.keegan.st to calculate the specificity automatically.