How do we determine which selector has more weight when we’re tagging the same element twice times or more in CSS? Let’s learn it!
Specificity? What?
Specificity is the CSS way of defining which selector property is going to be displayed to the user when you have two or more properties tagging the same element.
Your CSS can be more or less specific when you dictate the characteristics of an element, and afterward depending on which selector do you use to style it. Taking specificity into account when making or debugging your code will help you understand why things are not working how they’re supposed to.
Let’s take a look at this example:
See the Pen Specificity Example by Izaias Neto (@izaiasneto) on CodePen.
Take a look at the HTML and you can see that in this example, we’re working on the same HTML tag but using different CSS selectors (the id selector and the actual tag name selector). Different CSS selectors have different weights. Let’s take a look at some of them here and rank them as well:
From the least to the most specific:
Basic selectors (ex: h3 and pseudo-elements like ::before ::after and :not())
Class selectors (.my-awesome-div)
ID selectors (#my-awesome-div)
!important
Good to remember: pseudo selectors when used with other elements don’t weight in the specificity.
HTML inline styles (like style=”#my-awesome-div: background-color: firebrick;”) will always be superior to the stylesheets linked in the HTML (with the exception of !important). Use them wisely.
It’s also important to remember that the proximity that and element has in the document tree doesn’t matter for specificity, rather, inheritance does. But remember that directly targeted elements will always overwrite things that are inherited, see the example below:
See the Pen Specificity 02 by Izaias Neto (@izaiasneto) on CodePen.
Even though we’re tagging the parent element by its id (which is more specific than the element tag by itself as we’ve seen before), and it might look like that the id selector is supposed to have the most weight, we’re also tagging the header tag (h2) element directly, and that’s what makes the whole difference.
When should we classes? And when should we use Ids?
A place that beginners very often find themselves is not knowing what is the difference between ids and classes. Thinking by this simple rule will help you a lot: Ids are supposed to be unique, and classes should, in general, have more broad styling rules.
Need to style 4 divs with the same things? Better go with classes. On the other hand, use id if you need to tag a specific element, then you most likely should go with Ids. See the example below:
See the Pen Classes vs Ids by Izaias Neto (@izaiasneto) on CodePen.
Remember that, regarding specificity, as we’ve put in our ranking, the Id is more specific than the class selector, so you can combine them too. Using classes and selectors combined is often a way of getting the best of both worlds.
Using !important in your properties
Please, be very careful when using !important in your properties, since it has the biggest weight and can also overweight all our other selectors. The golden rule here is to use it only as your last possible scenario. Putting !important on everything is a very bad practice and can get you into trouble quick as you debug your code. You can very easily avoid walking in circles for hours when trying to find where the bug in your CSS is if you take very good care of where you use !important.
“Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live”
― John Woods
If you’d like to have a little more knowledge about this, I’d highly recommend you to check Standardista’s Specifishity. It’s a very good visual representation of how specificity works in the real world with very easy to understand examples as well.
And that’s it! Now you’ve learned a little bit more about CSS specificity and hopefully can use it in your future projects. Good luck!
Top comments (2)
Nice one man! you deserve an unicorn! :D
Good info bro thanks