CSS Specificity Explained: Master the Art of Styling with Precision

CSS Specificity Explained: Master the Art of Styling with Precision

Have you ever thought how browser decides which style to apply if there is a situation where multiple CSS rule sets are targeting the same HTML element? What are different parameters that are taken into consideration while deciding which CSS styles gets applied over an element?

CSS specificity determines which styles are applied when multiple CSS rule sets target the same HTML element. In other words, specificity can be thought of as priority given to the CSS rule sets by the browser. It is calculated based on a weighted system:

  • Inline styles (e.g., style attribute) have the highest specificity.

  • IDs have more weight than classes, attributes, or pseudo-classes.

  • Classes, attributes, and pseudo-classes are more specific than element selectors or pseudo-elements.

  • Universal selectors (*), combinators, and inheritance have the lowest specificity.

  • To avoid specificity conflicts:

    • Following consistent naming conventions.

    • Avoiding over-reliance on !important.

    • Using tools like CSS linters and specificity calculators to debug complex styles.

Specificity one of the fundamental concepts in CSS, that is used by the browser to determine which CSS rule set gets applied over an HTML element in a situation where there is a conflict deciding which CSS rule set gets applied.

<p class="highlight" id="unique">Hello World</p>
p { color: blue; }
.highlight { color: green; }
#unique { color: red; }

Which will be the color of <p> tag? The answer is red, due to specificity, let’s try to understand this:

  • #unique (ID selector) has the highest specificity.

  • .highlight (class selector) has a lower specificity.

  • p (type selector) has the lowest specificity.


The specificity of CSS selectors is calculated based on four categories:

  • Inline Styles

  • Number of ID selectors

  • Number of class selectors, attributes, and pseudo-classes.

  • Number of element selectors and pseudo-elements.

Let’s see how these Categories are taken into consideration while calculating specificity through examples, For simplicity purposes let us refer the categories as A,B,C,D respectively and rate each of the selector 1 point based on the category it belongs, we will use A-B-C-D notation in the examples below.

p { color: blue; } /*As this is tag selector which belongs to category D the notation
                        is: 0-0-0-1 */

Explanation:

  • Number of inline styles = 0.

  • Number of ID selectors = 0.

  • Number of class selectors, attributes, or pseudo-classes = 0.

  • Number of Element selectors = 1.

.highlight { color: green; } /* As this is class selector which belongs to 
                            category C the notation is 0-0-1-0 */

Explanation:

  • Number of inline styles = 0.

  • Number of ID selectors = 0.

  • Number of class selectors, attributes, or pseudo-classes = 1.

  • Number of Element selectors = 0.

#unique { color: red; } /*As this is id selector which belongs to category D
                         the notation is 0-1-0-0 */

Explanation:

  • Number of inline styles = 0.

  • Number of ID selectors = 1.

  • Number of class selectors, attributes, or pseudo-classes = 0.

  • Number of Element selectors = 0.

<p style="color: yellow;">Hello World</p> /* As this is inline-css which belongs to
                            category A the notation is 1-0-0-0 */

Inline styles have the highest specificity (1-0-0-0), overriding even ID selectors.


From lowest to highest:

  1. Universal selector (*), combinators (>, +, ~, ), and inheritance: 0-0-0-0

  2. Element selectors and pseudo-elements (div, h1, ::before): 0-0-0-1

  3. Classes, attributes, and pseudo-classes (.class, [attr=value], :hover): 0-0-1-0

  4. ID selectors (#id): 0-1-0-0

  5. Inline styles (style="..."): 1-0-0-0

  6. !important overrides all.

Here’s how specificity is applied:

/* 0-0-0-1 */
div {
  color: blue;
}

/* 0-0-1-0 */
.special {
  color: green;
}

/* 0-1-0-0 */
#primary {
  color: red;
}

/* 1-0-0-0 */
<div id="primary" class="special" style="color: yellow;">Hello</div>

The <div> will be yellow due to the inline style, which gets highest priority over all.


  1. Using browser developer tools (e.g., Chrome DevTools).

  2. Checking the "Computed" tab to see which rule is applied and why.

  3. Using online specificity calculators for complex selectors.

If a <p> tag is not styled as expected:

  1. Inspect the element in DevTools.

  2. Check the specificity of conflicting rules.

  3. Make changes to CSS to resolve the conflict.


  1. Specificity Calcul****ator: Tools like Specificity Calculator can help visualize and compare selector specificity.

  2. CSS Linters: Tools like Stylelint can identify overly specific rules and suggest improvements.

  3. Developer Tools: All modern browsers include tools for inspecting styles and debugging specificity issues.


  1. Using a CSS Methodology: Methodologies like BEM (Block Element Modifier) can help in creating maintainable styles.

     .block__element--modifier {
       color: blue;
     }
    
  2. Using Variables and Mixins: Using CSS preprocessors like SASS or LESS to reduce duplication and overriding css styles.

  3. Using CSS Resets: Using a CSS reset can help in minimizing browser inconsistencies and avoid specificity issues.


Understanding CSS specificity is important for writing efficient and maintainable styles. By following best practices, simplifying selectors, and using tools to debug conflicts, it can be assured that the styles are working the way they are intended to work.


We appreciate your thoughts and experiences with specificity! Kindly use the comment section to ask any questions, share your views, or discuss how you can apply this in real life.


  • 👍 Did you find this article helpful? Give it a like!

  • 💭 Share your favourite tech jokes in the comments.

  • 🔔 Subscribe for more tech content that's educational and occasionally funny.


Your feedback helps us create better content. Drop a comment below about:

  • Your experience with specificity.

  • Suggestions for future technical articles.