CSS Specificity Algorithm

Abbas SakarwalaAbbas Sakarwala
4 min read

CSS Specificity determines which rules apply when multiple styles conflict. It's like a tie-breaker in style declarations to decide what gets applied to an element. Let's break it down step-by-step, understand the algorithm with a flowchart, and use an analogy to make it memorable.

What is CSS Specificity?

Specificity is a ranking system. When there are conflicting CSS rules for the same element, specificity determines which rule applies. Rules with higher specificity override those with lower specificity.

How Specificity Works?

CSS specificity is calculated using four levels of importance, written as:
a-b-c-d-e
Where:

  1. a = Inline styles (style="" attribute).

    • Inline styles have the highest specificity and will always override styles if other selector(s) are also defined.

      Code:

        <html>
  <head>
      <style>
          *{
              color: gray;
          }
          #title{
              color: red;
          }
          .h1{
              color: blue;
          }
          h1{
              color: pink;
          }
      </style>

  </head>
  <body>
      <h1 id="title" class="h1" style="color:purple">Heading 1</h1>
  </body>
  </html>

      Output:

  2. b = Number of IDs in the selector.

    • The ID selector also has high specificity but comes after the inline Style specificity. So, if we have an ID and other selectors except the inline style, then the element will take the ID selector properties and values.

      Code:

        <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Specificity Algorithm</title>
      <style>
          *{
              color: gray;
          }
          #title{
              color: red;
          }
          .h1{
              color: blue;
          }
          h1{
              color: pink;
          }

      </style>
  </head>
  <body>
      <h1 id="title" class="h1">Heading 1</h1>
  </body>
  </html>

      Output:

  1. c = Number of classes, attributes, and pseudo-classes.

    • Class selectors and attribute selectors have moderate specificity. Suppose the element has a class or attribute selector and not an inline style or ID selector, then the element will take properties and values from the class or attribute selector.

      Code:

        <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Specificity Algorithm</title>
      <style>
           *{
              color: gray;

          .h1{
              color: magenta;
          }
      </style>
  </head>
  <body>
      <h1 class="h1">Heading 1</h1>
  </body>
  </html>

      Output:

  2. d = Number of element names and pseudo-elements.

    • Element selectors like <p>, <div>, <a> have low specificity.

      Code:

        <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Specificity Algorithm</title>
      <style>
           *{
              color: gray;
          }
          h1{
              color: aqua;
          }
      </style>
  </head>
  <body>
      <h1 class="h1">Heading 1</h1>
  </body>
  </html>

      Output:

  3. e = Universal Selector

    • Universal selectors (*) and combining selectors like not, first-child, and last-child have the lowest specificity.

      Code:

        <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Specificity Algorithm</title>
      <style>
           *{
              color: chocolate;
           }
      </style>
  </head>
  <body>
      <h1 class="h1">Heading 1</h1>
  </body>
  </html>

      Output:

Each level's value contributes to the final specificity score.

Specificity Calculation

To calculate specificity, assign a value to each part of the selector:

  • Universal Selector: 0

  • Element selectors and pseudo-elements: 1

  • Class selectors, attribute selectors, and pseudo-classes: 10

  • ID selectors: 100

  • Inline styles: 1000

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        * {
            color: gray; /* Specificity: 0 */
        }
        h2 {
            color: green; /* Specificity: 1 */
        }
        .subtitle {
            color: blue; /* Specificity: 10 */
        }
        #main-title {
            color: red; /* Specificity: 100 */
        }
    </style>
</head>
<body>
    <h2 id="main-title" class="subtitle" style="color: purple;">Hello, World!</h2>
</body>
</html>

Specificity Calculation for <h2 id="main-title" class="subtitle" style="color: purple;">:

  1. Inline styles: style="color: purple;" has a specificity of 1000.

  2. ID selector: #main-title has a specificity of 100.

  3. Class selector: .subtitle has a specificity of 10.

  4. Element selector: h2 has a specificity of 1.

  5. Universal selector: * has a specificity of 0 (negligible here).

Total Specificity = 1000 (inline) + 100 (ID) + 10 (class) + 1 (element) = 1111.

Since inline styles have the highest specificity (1000), the color: purple; inline style will take precedence regardless of the other styles applied.

Conclusion

Understanding CSS specificity can simplify debugging and enhance your control over styles. Using this flowchart and analogy, you'll easily determine which rule wins and why. Mastering specificity helps ensure clean and predictable CSS.

##

0
Subscribe to my newsletter

Read articles from Abbas Sakarwala directly inside your inbox. Subscribe to the newsletter, and don't miss out.

ChaiCodeCSS SpecificityCSS3

Written by

Abbas Sakarwala
Abbas Sakarwala