CSS Specificity algorithm

It stands for “Cascading Stylesheet specificity algorithm”, and most of you are even scared after even reading the complete name, but I am literally saying that it’s way easier then knowing how to kill the dangerous, small, annoying, painful mosquito. So don’t worry, let’s explain you what it is:

It’s just like an Hierarchical system for different CSS selectors on the basis of their property and dominance. You can imagine its use case situation through this case:

Here you can see, I am targeting a single Element(Paragraph) using different selectors like: Element selector, class selector, Id selector and Inline selector, then what will be the color of this paragraph. And similarly also need to select which color he need to pick, and it is done by CSS using specificity algorithm. which will select the value of any common property on the basis of how much specific the selector is.

So before we know the hierarchical system, let’s understand ways to add styling in very brief:

• Inline CSS: Styling written in the html element inside “style” tag.

• Element Selector: Applying style to any number of same elements using “element” name.

• Id Selector: Applying styling to any specific element using id tag.

• Class Selector: Applying style to a group or number of elements at a time using “class” tag.

So Now let’s understand the Order of Dominance of Different Selectors or CSS Specificity algorithm. So their dominance is in this order:

• Inline CSS: It is the most dominant CSS Selector and It can express Itself even any selector try to express.

• Id Selector: It is the second most dominant Selector and It can express itself even when Class or Element selector tries to express but fails to express in case of Inline CSS.

• Class Selector: It can express itself only in case of Element Selector and failed in any other case.

• Element Selector: It is the most weakest CSS Selector, and it can express itself only when no other selector tries to give value for same property for that same element.

---

Hope you understood this simple concept in this simplest way. And If you found reading this blog helpful, then make sure to hit on the like button, And be happy😊.