Understanding CSS specificity is crucial along with selectors, inheritance, and cascade as it aids in creating efficient CSS code and avoiding CSS leaks.

In this article, we will cover everything about CSS specificity to equip you with the knowledge to write better CSS.

What is CSS specificity?

According to MDN,

Specificity is the algorithm used by browsers to determine the CSS declaration that is the most relevant to an element, which in turn, determines the property value to apply to the element. The specificity algorithm calculates the weight of a CSS selector to determine which rule from competing CSS declarations gets applied to an element.

Specificity can be viewed as a score that determines the relevance of declarations to be applied to an element. Therefore, when two or more CSS selectors apply to the same element, the one with higher specificity will win and be applied.

For example, consider the code snippet below:

In the above code, we have a type selector targeting the div element, making the font colour blue. But we also have a class selector, .red, applied to the same div element, making the font colour red.

In this scenario, the colour of the div element will change to red since the class selector has higher specificity than the type selector.

This example offers a brief explanation of how CSS specificity functions. Now, let’s explore how to calculate specificity.

How to calculate specificity?

To compute specificity, we employ three scores, as shown below:

The first score is always greater than the other two scores. The middle score is lower than the first score but higher than the last score. The last score always has the lowest value.

For instance, 1,0,0 always outranks 0,1000,0, regardless of the size of the second score.

Each score comprises:

ID selectors
Class selectors, attributes selectors, pseudo-classes
Type selectors, pseudo-elements

Furthermore, we will discuss other features that do not directly influence the score but are still relevant.

To simplify the calculation process, you use the CSS Specificity Calculator which gives you the specificity score based on the selectors.

Let’s examine examples of each selector type.

Type selectors & pseudo-elements

Type selectors and pseudo-elements has the lowest specificity.

For instance, when used alone, button or ::before would produce a specificity score of 0,0,1 in the calculator. However, by adding more selectors or pseudo-elements such as form button, the specificity score increases. In this case, form button would produce a score of 0,0,2, while form button::before would produce a score of 0,0,3.

Consider the following example:

In this case, the text color of the button would be red. This is because the specificity score of form button (0,0,2) is higher than that of button (0,0,1).

Class selectors, attributes selectors & pseudo-classes

The class selectors, attributes selectors and pseudo-classes has the higher specificity compared to type selectors and pseudo-elements.

When using .green, [type="submit"], or :hover as CSS selectors, the specificity calculator would return 0,1,0.

From the above example, the text color of the button will be green, as .green (0,1,0) has a higher specificity than form button (0,0,2), even though form button uses two type selectors.

ID selectors

ID selectors have the highest specificity among the three types of selectors discussed previously.

Even though we are using highly specific selectors like form button.green[type="submit"], which gives a specificity of 0,2,2, the id selector #yellow, which gives a specificity of 1,0,0, will override the other selectors.

Due to their strong specificity, it is generally not recommended to use ID selectors in CSS. It can be difficult to override the styles within an ID selector, and this can make it challenging to maintain your CSS code.

The Order of the Rule

The order of the rule can impact which selector takes precedence when multiple selectors have the same specificity. In such cases, the selector defined later (positioned lower in the CSS file) will override the other selectors defined earlier.

Let’s take the previous example. This time we will remove the id="yellow" and form button.green[type="submit"] but add one more class, aqua, defining the aqua colour below .green:

In this example, both classes .green and .aqua have the same specificity score of 0,1,0. However, since .aqua is defined below .green, it will take precedence and the colour of the button will be aqua.

Inline style

The inline style always takes precedence over the other types of selectors, including ID selectors.

Consider the following example:

In this case, the text colour of the submit button will be navy, as the inline style takes precedence over all other selectors.

Inline styles can be useful when you need to override the styles of a third-party library that you cannot modify directly from an external CSS file. However, it is important not to overuse inline styles because they cannot be modified by any other selectors in your external CSS files. This can make it challenging to maintain your CSS code in the long run.

!important

!important flag makes the declaration as important and overrides all other declarations from the same origin and cascade layer.

In the example above, the !important flag is used in the button selector to set the colour to blue, which has the lowest specificity. Despite having the lowest specificity, the !important flag gives it the highest priority, overriding all other colours. Therefore, the button colour will be blue.

It’s important to note that the use of !important can lead to maintenance problems since it can be difficult to override. Therefore, it’s recommended to avoid using it unless absolutely necessary such as setting definite values for utility classes.

Selectors with no weight

Now let’s explore some selectors that do not contribute to the specificity weight.

Universal selectors

The universal selector selects any and all elements regardless of its type. It holds the lowest specificity value of 0,0,0 and thus, any other selectors will take precedence over the universal selector.

Combinators

While the combinators would make the selectors more specific, they don’t contribute to the weight of specificity. This means that, for instance, the selectors a b { … } and a + b { … } will have an equivalent specificity of 0,0,2.

:is() & :where()

The :is() and :where() pseudo-classes both take a selector list as an argument and select any element that matches any of the selectors in the list. Essentially, they perform the same function. However, the difference between them lies in their effect on specificity. While the pseudo-classes themselves do not contribute to specificity, the selector list in the function will determine the specificity for each pseudo-class.

With :is(), the highest specificity value from the selector list will be used. For instance, the following selector list:

:is(button, .green, #yellow)

will yield a specificity value of 1,0,0 because the #yellow ID selector has the highest specificity value among the selectors in the list.

On the other hand, with :where(), the specificity will be 0,0,0 as it will always be replaced with zero. For example, the following selector list:

:where(button, .green, #yellow)

will always have a specificity value of 0,0,0.

:has() & :not()

The :has() and :not() pseudo classes don’t have any specificity value themselves, but they inherit the specificity of the most specific selector in their arguments in the same way as :is() does.

For example,

:has(button, .green, #yellow)

:not(button, .green, #yellow)

will have the same specificity value of 1,0,0 as :is(button, .green, #yellow).

CSS nesting

In CSS nesting, the specificity follows the most specific selector in the parent selector list, which is identical to the behaviour of :is(), :has(), and :not() pseudo-classes.

Let’s continue with the previous example but this time remove the inline style from the button element, and add a new class to both the form and the button element:

You might think that the background colour of the button will be aliceblue because the first CSS block gives us 0,1,1 from form .button but the second block gives us 0,2,0 from .form .button.

However, because there is an #main ID in the selector group of the first block, it gives us a specificity value of 1,1,0, which is stronger than the second block.

Please note that at the time of writing this article, only a few browsers support CSS nesting. If you want to stay up-to-date with the latest updates on CSS nesting, please check out the CSS nesting article here.

Additional Tips

Now that we understand how specificity works, let’s discuss some tips to handle CSS better and avoid specificity issues.

1. SEM & BIO

To handle CSS specificity better, there are many methodologies available, such as BEM. Many developers are trying to find one best solution but instead we can use different methodologies and tools together in the right places to gain flexibility.

Based on my years of CSS experience, I have published an article, “Combining the Powers of SEM and BIO for Improving CSS” on CSS-Tricks. This article provides detailed information on how to handle CSS not only with techniques but also with CSS philosophy.

2. Cascade layers

SEM & BIO can be useful in organising CSS, but there is also a native way to improve CSS management known as “cascade layers”. Cascade layers are supported by most modern browsers.

Cascade layers in CSS refer to the order in which styles are applied to an element. This order is determined by the CSS cascade, which is the process of combining and prioritising multiple styles applied to the same element.

The topic of cascade layers is quite extensive, and we will cover it in-depth in a future article. However, if you are interested in learning more about it, you can check out resources such as MDN, CSS-Tricks and Smashing Magazine. Additionally, you can refer to the specification on W3C for a complete understanding of how cascade layers work in CSS.

3. CSS Modules

CSS Modules are a CSS framework which allows developers write locally scoped classes and animations by default.

CSS modules create unique classes for each selector at build time, and then replace the classes with their generated counterparts in the final output. This allows for the creation of truly modular CSS, where each module can be developed and maintained independently without fear of clashing with other styles elsewhere in the application.

CSS modules are supported in many popular frameworks such as React, Vue, and Angular, and can also be used standalone with build tools like Webpack and Rollup. I am using it in most of my React and Next.js projects.

I am planning to publish an article that explains how to use CSS modules in your projects, so stay tuned for updates!

Conclusion

CSS specificity is a crucial aspect of writing high-quality CSS code. With a good understanding of CSS specificity, developers can write efficient and organised CSS styles that can be easily maintained and updated. Furthermore, by avoiding common mistakes such as using too many ID selectors or relying too heavily on inline styles, we can prevent CSS leaks and ensure that our code is more robust and less error-prone. By following best practices and keeping our CSS specificity in check, we can achieve better results and deliver more effective web applications.