Welcome to Another Informative Tutorial by Zaions!
Ever wonder why some styles override others? That's specificity at work!
In this Tutorial, You Will Learn:
How CSS Specificity is Calculated
The Importance of Understanding Specificity
Practical Examples and Solutions
CSS Specificity: The Basics
We'll start by understanding how specificity units are allocated for different types of selectors:
Tag name, pseudo-element selectors: 1 unit
Class, attribute, pseudo-class selectors: 10 units
ID selectors: 100 units
Inline-CSS: 1000 units
FREE Reference Sheet and Web App
To make life easier, we've created a reference sheet that you can use for future projects. Plus, try our free web app for calculating CSS specificity CSS Specificity Calculator: https://ztools.zaions.com/css-specificity-calculator.
Note: Combinator selectors count is currently in progress and will be added soon.
Examples and More!
We demonstrate several real-world examples, so by the end of this tutorial, you will be proficient in calculating CSS specificity.