Specificity Algorithm in CSS
Khelendra Kumar ThakurCSS Specificity is an algorithm that uses for deciding which properties apply in element. When in an element it has multiple CSS rules then which rule gets the more priority that was decide with the help of Specificity Algo.
In HTML you can apply CSS in 3 different ways
1.Inline CSS
2.Internal CSS
3.External CSS
Inline CSS
In Inline CSS you can directly apply this in the tag of HTML, with the help of style attribute eg:<h1 style=” color: black;”></h1> .It has the highest priority as compare to other two types. It is useful when you want to apply CSS properties in specific tag then it is useful. It also have some drawback like when you want apply CSS properties in multiple h1 tag then you have to go to each and every h1 tag and then apply style attributes in every h1 tag, so this is so time consuming. This is not mostly used in projects
Internal CSS
In Internal CSS you write this tag <style> inside the <head> tag of HTML. It is useful when you want to apply CSS properties in multiple same tag and different tag. Like when you want to apply property in multiple <h1> tag you simply have to write h1{} inside the style tag then whatever changes you want in all h1 tag you can apply.
External CSS
In External CSS this is also written inside the head tag of HTML, but in it you use link tag and href=” ” attribute to link the CSS file and you can also link multiple CSS file with the help of this href=” ” attribute and in project its mostly used.
The Calculation of Specificity Algo
To calculate the specificity we gave the weightage to the selector
Inline styles (style=” ” attribute) → 1000
ID selectors (#id) → 100
Class selectors (.class), attributes , pseudo-classes ( :hover, :nth-child) → 10
Element selectors (div, p, h1, etc.) and pseudo-elements ( ::before, ::after) → 1
The weightage to Inline styles is more as compare to other you can’t cascade in it after apply CSS in it. After Inline the Id selector has more priority and after it Class selector has more priority and in last the Element selector
Eg:-
p { color: blue; }
.p { color : red; }
#main { color : green }
Inline style= ” color : black;“
which one apply in it . Black color apply in p because inline has the highest specificity because it written directly inside the tag
Subscribe to my newsletter
Read articles from Khelendra Kumar Thakur directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by