DEV Community

Cover image for How to understand the CSS specificity with the help of Visual Studio Code
Diogo Machado
Diogo Machado

Posted on

How to understand the CSS specificity with the help of Visual Studio Code

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{

}
Enter fullscreen mode Exit fullscreen mode

Example 2: specificity 0-0-2

div p{

}
Enter fullscreen mode Exit fullscreen mode

Example 3: specificity 0-0-5

div p a ul li{

}
Enter fullscreen mode Exit fullscreen mode

Example 4: specificity 0-1-0

.wrapper{

}
Enter fullscreen mode Exit fullscreen mode

Example 5: specificity 0-1-1

.wrapper p{

}
Enter fullscreen mode Exit fullscreen mode

Example 6: specificity 1-0-0

#user{

}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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)