CSS Specificity
Introduction:
Specificity is the algorithm used by browsers to determine which CSS rule applies to a particular element when one or more styling applied to the same element. It is calculated based on the types of selectors used. The Specificity algorithm calculates the weight of the selector to determine which rule should be applied to the element.
Specificity Hierarchy:
Specificity follows a hierarchical pattern to determine the weight of the element. It is usually represented as four values: a,b,c,d.
The specificity is calculated as:
- Inline styles(a).(Highest specificity)
- ID selectors(b)
- Class, Attribute and Pseudo-class selectors(c)
- Element and Pseudo-elements Selectors(d)
Example:
<html>
<head>
<style>
#demo {color: blue;}
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p>Hello World!</p>
<p class=”test”>Second Text!</p>
<p id=”demo” class=”test”> Demo Text!</p>
</body>
</html>
Here the text “HelloWorld” will be red in colour.
The next text “Second text” will be in green colour because of class selector.
The “Demo text” will be blue colour.
When comparing selectors, the browser reads specificity from left to right. A single ID selector (0,1,0,0) will always outweigh any number of class selectors (0,0,n,0).
Best Practices for managing specificity:
- Keep Selectors simple – We should always aim lower specificity whenever possible.We have to use class-based selectors instead of deeply nested selectors.
- Use Naming Convention – Methods like BEM(Block Element Modifier) can help to maintain consistent specificity levels.
- Organize specificity
Group your CSS from least specific to most specific:
– Element selectors
– Class selectors
– Context-specific overrides
– Utility classes - Leverage CSS custom properties – CSS varaiables can managestyles without increasing specificity.
Conclusion:
Understanding specificity is very important for using CSS effectively and design.By carefully structuring the style sheets we can avoid conflicts and ensure necessary styling is applied to the specific page. It gives control over the stylesheets.
