CSS Selectors:

How to calculate specificity in CSS

Summary

CSS specificity determines which styles are applied when multiple rules target the same element. This article explains the different types of selectors, their specificity values, and how combinators influence selector matching.

Published:

2025-05-08

Updated:

2025-05-08

Reading time:

04:30

Author:

Jonas Jared Jacek

Tags:

css

License:

CC BY-SA 4.0

Permalink:

How to calculate specificity in CSS

Introduction #

In Cascading Style Sheets (CSS), specificity is a method of resolving conflicts between multiple style rules that target the same Hypertext Markup Language (HTML) element. The browser uses specificity to determine which rule takes precedence when styles collide.

Each CSS selector adds to the specificity score. This score determines which rule overrides another when multiple rules match the same element.

To convert selectors into specificity score, you can also use the Specificity calculator.

Selector types #

CSS selectors are classified into several types. Each type contributes a certain value toward the specificity score. Specificity is written as a group of three numbers: a,b,c, where:

• ID column:
  a is the count of ID selectors.
• CLASS column:
  b is the count of class selectors, attribute selectors, and pseudo-classes.
• TYPE column:
  c is the count of type selectors and pseudo-elements.

Specificity calculation #

If there are multiple rules with different styles for the same element, the one with the highest score — ID - CLASS - TYPE — gets applied. The score is determined by counting the number of selector components in each category.

For example:

#main .item div::before

• #main is an ID → a = 1
• .item is a class → b = 1
• div is a type selector, ::before is a pseudo-element → c = 2

So the specificity is: 1,1,2

Compare scores from left to right, like comparing numbers:

• 1,0,0 beats 0,9,9
• 0,2,1 beats 0,1,9
• 0,0,2 beats 0,0,1

If two rules have the same specificity, the one that appears later in the CSS wins.

A !important declaration overrides all other rules, regardless of specificity, unless another rule with !important has higher specificity.

Inline styles: Written directly in the HTML tag using the style attribute. Highest specificity: 1,0,0,0 (implicitly outside normal calculation).</code>

Selectors and their contribution to specificity #

Each type of CSS selector contributes differently to the specificity score. The following sections explain how individual selectors are categorized and how they affect the final score.

Universal selector #

The universal selector (*) matches any element, but it contributes nothing to specificity.

• Specificity: 0,0,0

Type selector #

Type selectors match elements by their tag name.

For example: header, main, footer.

• Specificity: 0,0,1

ID selector #

ID selectors match elements by their unique id attribute and carry the highest specificity among simple selectors.

For example: #header, #main-content, #footer.

• Specificity: 1,0,0

Class selectors #

Class selectors match elements with a specific class attribute.

For example: .button, .nav-item, .highlight.

• Specificity: 0,1,0

Attribute selectors #

Attribute selectors match elements based on the presence or value of attributes.

For example: [type="text"], [data-role], [disabled].

• Specificity: 0,1,0

Pseudo-classes #

Pseudo-classes represent states or relationships in the document structure.

For example: :hover, :disabled, :first-of-type.

• Specificity: 0,1,0

Pseudo-elements #

Pseudo-elements refer to parts of an element that do not exist in the document tree.

For example: ::before, ::after, ::first-line.

• Specificity: 0,0,1

Special case: Selectors used within ::slotted() add to the overall specificity.

Combinators #

Combinators do not contribute to specificity.

Specificity calculation examples #

Simple selectors #

A simple selector targets a single element type or attribute without combining it with others. Examples include div, .class, or #id.

1. *

   • Universal selector.
   • Specificity: 0,0,0

2. div

   • Type selector.
   • Specificity: 0,0,1

3. .button

   • Class selector.
   • Specificity: 0,1,0

4. #header

   • ID selector.
   • Specificity: 1,0,0

5. a:hover

   • Type selector (a): 0,0,1
   • Pseudo-class (:hover): 0,1,0
   • Total specificity: 0,1,1

Compound selectors #

A compound selector combines multiple simple selectors without any combinator. For example, div.class#id is a compound selector.

1. ul > li.active

   • Type selectors (ul, li): 0,0,2
   • Class selector (.active): 0,1,0
   • Total specificity: 0,1,2

2. #main .content p

   • ID selector (#main): 1,0,0
   • Class selector (.content): 0,1,0
   • Type selector (p): 0,0,1
   • Total specificity: 1,1,1

3. nav ul > li:is(.highlight, .active #home)

   • Type selectors (nav, ul, li): 0,0,3

   • :is(.highlight, .active #home):

     • .highlight: 0,1,0
     • .active #home: 1,1,0
     • Highest specificity within :is(): 1,1,0
   • Total specificity: 1,1,3

4. main:where(#top) nav ul.main li:nth-child(2n + 1)

   • :where(#top) has zero specificity.
   • Type selectors (main, nav, ul, li): 0,0,4
   • Class selector (.main): 0,1,0
   • Pseudo-class (:nth-child): 0,1,0
   • Total specificity: 0,2,4

5. form input[type="text"]:focus

   • Type selectors (form, input): 0,0,2
   • Attribute selector ([type="text"]): 0,1,0
   • Pseudo-class (:focus): 0,1,0
   • Total specificity: 0,2,2

6. section#content .article h2.title

   • ID selector (#content): 1,0,0
   • Class selectors (.article, .title): 0,2,0
   • Type selectors (section, h2): 0,0,2
   • Total specificity: 1,2,2

7. header nav > ul.menu li:first-child

   • Type selectors (header, nav, ul, li): 0,0,4
   • Class selector (.menu): 0,1,0
   • Pseudo-class (:first-child): 0,1,0
   • Total specificity: 0,2,4

8. body.home div#main-content article.post

   • ID selector (#main-content): 1,0,0
   • Class selectors (.home, .post): 0,2,0
   • Type selectors (body, div, article): 0,0,3
   • Total specificity: 1,2,3

9. ul#nav > li.active > a:hover

   • ID selector (#nav): 1,0,0
   • Class selector (.active): 0,1,0
   • Type selectors (ul, li, a): 0,0,3
   • Pseudo-class (:hover): 0,1,0
   • Total specificity: 1,2,3

10. div.content > p::first-line

    • Class selector (.content): 0,1,0
    • Type selectors (div, p): 0,0,2
    • Pseudo-element (::first-line): 0,0,1
    • Total specificity: 0,1,3

Further readings #

Sources and recommended, further resources on the topic:

• W3C: Specificity rules
• W3C: Selectors Level 4 – Specificity
• MDN Web Docs: CSS Specificity
• CSS specificity calculator
• CSS selectors cheat sheet

Author

Jonas Jared Jacek (J15k)

Jonas works as project manager, web designer, and web developer since 2001. On top of that, he is a Linux system administrator with a broad interest in things related to programming, architecture, and design. See: https://www.j15k.com/

<p xmlns:cc="http://creativecommons.org/ns#" xmlns:dct="http://purl.org/dc/terms/"><a property="dct:title" rel="cc:attributionURL" href="https://www.ditig.com/how-to-calculate-specificity-in-css">How to calculate specificity in CSS</a> by <a rel="cc:attributionURL dct:creator" property="cc:attributionName" href="https://www.j15k.com/">Jonas Jared Jacek</a> is licensed under <a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank" rel="license noopener noreferrer">CC BY-SA 4.0</a>.</p>