Most people start writing CSS code without know correctly what is the concept called specificity in the CSS language.
First, we should understand what is specificity. When the browser renders the elements on the screen, he has a logic for prioritizing styled elements of DOM.
For calc the specificity number, the browser considerer the list selectors type:
- Type elements: a, h1, p
- Class elements: .wrapper
- ID elements: #example
To better understand how the calc works, go to know what is the number and what they represent for us.
X-0-0
Consider that X is the number of ID selectors in the selector
0-Y-0
Y represents the number of class selectors, attribute selectors, and pseudo-classes
0-0-Z
Z represents the number of type selectors and pseudo-elements
*, +, >, ~ not increasing specificity
Is important to remember that of force is more powerful of left to right, so, X > Y > Z
Example 1: specificity 0-0-1
div{
}
Example 2: specificity 0-0-2
div p{
}
Example 3: specificity 0-0-5
div p a ul li{
}
Example 4: specificity 0-1-0
.wrapper{
}
Example 5: specificity 0-1-1
.wrapper p{
}
Example 6: specificity 1-0-0
#user{
}
The most powerful elements in the browser, that may destroy all specificity in your stylesheet is the inline styles, in the next example does not matter what is determinate in the class selector .link, the style is more powerful in the specificity.
<a class="link" style="color: black;">Read more</a>
Another way is the !important, it can destroy all your specificity because he is the strongest.
Using the VS Code for visualizing the specificity
Maybe you don't know that if you point your mouse of the selector CSS, the VS Code let show you the calc of specificity, is super simple, try it.
I hope you liked this, share with your friends.
Read more about:
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
Amazing examples of this:
https://specifishity.com/
Top comments (0)