THE GARDEN

CSS Specificity

Updated 05 Oct 2026

• •

  What it is

  • •

    a selector weight used when competing declarations reach the same relevant cascade precedence

• •

  Calculation

  • •

    compare the tuple $(\text{IDs},\text{classes/attributes/pseudo-classes},\text{types/pseudo-elements})$ lexicographically.

  • •

    it is nt a decimal score where enough classes can carry into an ID column

  • •

    :where() contributes zero specificity; is(), not(), and :has() use specifcity derived from their selector arguments

• •

  Example

  • •

    [type="password"] {
      /* 0-1-0 */
    }
    input:focus {
      /* 0-1-1 */
    }
    :root #myApp input:required {
      /* 1-2-1 */
    }
    #myElement {
      color: green; /* 1-0-0  - WINS!! */
    }
    .bodyClass .sectionClass .parentClass [id="myElement"] {
      color: yellow; /* 0-4-0 */
    }
    

• •

  Reference

  • •

    https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Cascade/Specificity

◌ Explore connections in Graph view