CSS Selector Specificity Compare Tool

Last updated - May 05, 2019

Easily test, compare and tweak selectors to discover the one with higher specificity.
For a given selector, the tool generates 2 alternatives, toggle between them
to visually identify the one with higher specificity.

For best results use it with Chrome

While this is not always the case I must confess many times I have found myself caught investing more time than I wanted trying to override CSS style rules I didn't create and can't remove from a page either. A common issue people get while trying to customize a template or update some styling of an existing website.

So what does web developers do most of the time when they face this specific problem? Well, anecdotal observations (no science involved here) suggest some of the most popular approaches to get around this problem are:

1. Using !important in rules like crazy.
2. Setting the style attribute with the rules you want to change. (desperate case)

Both of these approaches are for the most part wrong. Most likely experienced folks would try to solve this issue by tweaking CSS selector specificity. If you haven't heard about this concept before I will explain it briefly a bit later but first let me start with a more basic and yet sometimes misunderstood concept.

What is a CSS Selector

According to the W3C definition, a selector is a pattern matching rule to target elements in the document tree in order to apply styling rules. Selectors can range from simple element names to rich contextual patterns, which can be defined in terms of attributes values (id and class attributes being specially intended for this purpose) and much more. In short, they are used to select the elements you want to style in a web page.

What is Selector Specificity

Given a set of selectors targeting the same element, how does the browser decides which one to apply? This is precisely were the CSS selector specificity concept comes in. Given a set of matching rules or selectors as I explained earlier, specificity will ultimately determine which styles are the most relevant to be applied to an element. Browsers must calculate specificity in strict terms giving a weight to each selector declaration, so website developers expect the same behavior across different browser vendors.

Dealing with specificity is not as easy as you might think, luckily the whole concept only applies when more than one selector targets the same element or set of elements, which is exactly what happens when we want to override a style defined by some CSS library our page uses, a common situation in modern web design.

So in order to solve a styling conflict without having to modify HTML markup (by using the style attribute) or setting the !important keyword to rules potentially leading to even more conflicts, a better alternative is to use a higher specificity selector that will naturally override others by using browser's built in specificity weighting rules.

The Selector is the key

To control conflicting styles, we should care more about the selector we're using to set our style rules than the rules themselves. By carefully crafting your selector with the required specificity you can tame this beast with less effort, but for that you will need to dig into this concept deeper and try different alternatives to figure out which one will work for you. ...Or you can "cheat" a little bit and have a tool help you generate selector alternatives to get out of this problem faster.

The CSS Selector Specificity Compare Tool

The idea behind this tool came from the project we are currently working on. One of the requirements it has is to override styles all the time so users get the desired results. We thought it could be a good idea to share a tool to generate selector alternatives with potentially higher specificity so people can have something to work with while troubleshooting a selector and visualize targeted elements better to further tweak according to their needs. If you have problems to identify your initial selector to begin with, we have a different tool to help you exactly with that.

This tool will generate 2 selector alternatives for an initial input, the alternatives should target the same elements as the original one. After you enter and apply the initial selector, targeted elements will highlight in a green dotted outline, while the alternatives will simultaneously be generated but not applied. You will then have the possibility to toggle on and off any of them and compare which one has better specificity by looking at the outline color of the elements highlighted. If you think any of the alternatives can be tweaked or improved further you can modify them manually right away and re-apply them with your changes.

But for all that to happen of course you first need to tell the tool which web page you will use for this exercise (it won't work for local/offline resources). The proposed alternatives are certainly not so beautiful. However you'll be able to do some specificity hacking by tweaking them according to your taste and see visually which one wins the specificity fight. Even if the proposed selectors are not exactly what you had in mind, don't forget the tool also allows you to further tweak any of them and test if they will override the original one in a way that suits your needs.

Set your website URL and enter the selector you're troubleshooting. Apply it to the page to get alternatives.

Toggle first alternative to test a class based selector, if targeted elements highlight changes to blue, its specificity is higher.

Second alternative will give you a more verbose selector based on tag names, hierarchy positions and ids. 

As I mentioned above we at Aliadoc play a lot with the specificity concept in order to override existing styles. We are building a SaaS app to visually upgrade the styling of existing websites easily. It's great for site maintenance and to perform extra design customization in any kind of page no matter what technology was used to create it. If you're curious, visit our website to learn more.

We hope you had the chance to use this comparator tool. Leave any feedback in the comments area below to help us improve it.