CSS (Cascading Style Sheets) is a styling language for creating and designing web pages. It allows developers to define the layout, color, typography, and other styles of web pages. CSS uses selectors to target specific HTML elements and apply styles to them. However, when multiple CSS rules target the same element, it becomes essential to understand how CSS specificity works to ensure that the right styles are applied.

What is CSS Selector Specificity?

CSS selector specificity is a score assigned to each CSS selector that determines which style rule applies to an element when multiple rules target the same element. The higher the score, the more specific the selector, and the more priority it takes over other selectors. CSS selector specificity is calculated based on the number and types of selectors used in a CSS rule.

CSS Selector Specificity Values

CSS assigns specificity values to selectors based on their types. The following table outlines the specificity values for each type of selector:

How to Calculate CSS Selector Specificity?

To calculate the specificity value of a CSS selector, you need to count the number of each type of selector used in a rule. The more specific the selector, the higher its score. Here's an example:

Consider the following CSS rule:

body div.content #main-article a.btn:hover {
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
}

• The type selector (body) has a specificity value of 1.

• The type selector (div) has a specificity value of 1.

• The class selector (.content) has a specificity value of 10.

• The ID selector (#main-article) has a specificity value of 100.

• The type selector (a) has a specificity value of 1

• The class selector (.btn) has a specificity value of 10.

• The pseudo-class (:hover) has a specificity value of 10.

To calculate the specificity value of this selector, you add up the specificity values of each selector used in the rule, which gives you a score of 133 (3 for the type selector + 100 for the ID selector + 20 for the class selector + 10 for the pseudo-class).

If you have multiple selectors in a rule, you add up the specificity scores of all the selectors to get the total specificity score.

How Does CSS Selector Specificity Impact Your Styles?

When you apply styles to an element using CSS, you can use multiple selectors to target the element. However, if you use conflicting styles in different selectors, the specificity of each selector determines which style takes precedence. The higher the specificity score, the more priority the selector has.

For example, consider the following CSS:

p {
    color: #000;
}

#main-article p {
    color: #007bff;
}

In this case, the second rule targets all p elements that are descendants of an element with the ID of main-article. Since the second rule has a higher specificity score (100 for the ID selector vs. 1 for the type selector), the text color of the p elements inside the main-article element will be blue, not black.

If you want to override a style applied by a more specific selector, you need to increase its specificity score by using more specific selectors. For example, you could add a class selector to your selector to increase its specificity, like this:

.main p {
    color: #000;
}

#main-article .main p {
    color: #007bff;
}

In this case, the second rule has a specificity score of 111 (100 for the ID selector and 10 for the class selector, and 1 for the type selector), which is higher than the first rule's specificity score of 11 (1 for the type selector and 10 for the class selector). As a result, the text color of the p elements inside the main-article element with the class of main will be blue, not black.

Using the !important keyword is another way to increase the specificity of a selector. However, it's generally not recommended to use !important unless it's absolutely necessary, as it can make your styles harder to maintain and override. The !important keyword has a specificity score of 10,000, which is higher than any other selector.

You can practice honing your understanding of specificity with this calculator!

Conclusion

Understanding CSS selector specificity is essential for writing efficient and maintainable CSS code. By knowing the specificity values of each selector type, you can write more specific selectors to target the elements you want to style accurately. Keep in mind that increasing the specificity of a selector can sometimes make your code harder to maintain, so try to use the most specific selector possible without compromising readability and maintainability.