There are different ways for the CSS to apply the style to the given element through class, id or the element itself. Have you ever wondered, how the CSS will determine which style should be applied if all these are pointing to same element but have different style? CSS determine the weight of the style using specificity algorithm. Let’s learn about specificity in CSS.
What is Specificity?
Specificity is the algorithm in CSS which determines which element declaration should be applied to the element. Specificity calculates the weight of the CSS selector to determine which completing CSS declaration’s style should be applied. Think of specificity as a hierarchy that determines which CSS styles apply to an element based on the weight of selectors.
Specificity Hierarchy
This hierarchy is from lowest to the highest.
Element :
The style which is applied to the html element in style element.
In this code, the color of paragraph will be red.
Class selector :
The style applied through the class selector have more weight than element selector.
In this code, the color of paragraph will be green even if element selector’s style is given.
Id selector :
The style applied through the id selector have the highest priority among the above those two.
The color of the paragraph will be blue because of id selector having the highest priority.
Inline style :
When the style is directly given to the element through the attributes. This have the highest weight among all.
In this code, the color of the paragraph will be pink because of the highest priority of the inline style.
More specificity rules
- If two selectors having the same weight is apply two different style then the selector which came last will be applied to the element because the CSS read the code from top to bottom.
In this, the color of the background will be red because it came last.
If there is two id selector but in one them the element is also given then it’s weight will increase and the style of that selector will be applied. Let’s understand using example,
In this, there are two id selector #myDiv and a div[id=myDiv]. In one of myDiv, div is also mention which tell which element it is, so the style in div#myDiv will be applied that is green background.
If the style is applied in the HTML document rather than different CSS sheet which is link to the HTML document, then the style applied in internal HTML document will is applied.
In this, the background color will be yellow.
!importance Exception
The CSS declaration marked as !important override all other declaration for the same element even if having the highest priority. For example, if id selector have different declaration and class selector have different declaration, so between these two the declaration that will be applied is of id selector but if we use !important for the class selector then the declaration of the class selector will be applied.
In this, the background of the paragraph will be red even if id selector is present because of the !important keyword used in p.
Conclusion
In conclusion, understanding CSS specificity is crucial for effectively managing styles in web development. By grasping the hierarchy of selectors—ranging from element selectors to class and ID selectors, and recognizing the power of inline styles—you can predict which styles will be applied to elements. Additionally, being aware of specificity rules, such as the impact of selector order and the use of the !important declaration, allows for more precise control over styling conflicts. Mastering these concepts will enable you to write cleaner, more efficient CSS and ensure that your web pages render as intended.