Demystifying CSS Specificity | Must know the concept to master CSS
So, before taking about the css specificity ,Let me ask you one question?………………….!
“Have you ever comes across a situation where you defined a property (let say color: blue) to one of the element and its not being applied.I think every developer must comes across this situation untill and unless they know about CSS Specificity.
Introduction:
Alright, CSS Specificity represents a set of rules that are used to decide which style should get applied to a particular element. Specificity is calculated based on the CSS selectors which are used to target elements.
If multiple CSS selectors are targeting the same element and trying to set the same CSS property to a different value, the selector with the higher specificity will override the selectors with the lower specificity. In other words, the selector with the highest specificity will affect the targeted element, and its style is going to be applied.The browser will calculate the specificity score for each CSS selector, and use that score to determine which of the conflicting styles should get applied to the element on the page.
Important! (Yes it’s important)
- You could have seen the !important in some style sheets
!important,this is bad practice as it can make debugging CSS much more difficult. When two conflicting styles make use of an!importantdeclaration, the most specific style wins.
You may run into situations when leveraging CSS frameworks, such as Bootstrap, material UI, where you can’t use CSS specificity to override the native styles. In these instances, using !important is not considered bad practice.
Calculating specificity
Based on the main selector types, when calculating specificity we can group the scores into 4 categories (as shown in the table above), so each number represents the count of the specific selector for the element in question.
Based on that, we can present the specificity score using the following 4 number column format:
Highest ->lowest specificity:
A — Inline styles
B — ID selectors
C — Class, pseudo-class, and attribute selectors
D — Element and pseudo-element selectors
When an element doesn’t have any styles applied to it, the score would technically look like this: 0 0 0 0 (by default it’s 0)
Main Selector types and its browser score inorder to apply :
Inline Style :
Weight : 1 0 0 0
ID selectors :
Weight : 0 1 0 0
Class, pseudo-class, and attribute selectors :
Weight : 0 0 1 0
Element and pseudo-element selectors :
Weight : 0 0 0 1
Important! having the highest priority it won’t care about the previously defined rules and overrides!
Weight: It doesn’t directly alter the specificity score, but it does interact with it, as a method to override more specific selectors.
5. Conclusion
Specificity is one of the most important aspects of CSS. Being familiar with its rules allows us to understand and efficiently troubleshoot issues in situations when certain styles aren’t getting applied. It also allows us to write organized and maintainable CSS code, with optimized selectors.However, you can also use chrome dev tools to inspect why some of your css rules aren’t apply under the style panel , those styles have stricked out are the ones overriden by the some of the properties top on it.
References:
- MDN page on CSS Specificity: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
- CSS3 Selectors Specificity: https://www.w3.org/TR/selectors/#specificity
