Specificity

Specificity is a key concept in CSS that determines which style rules are applied when multiple selectors target the same element. It’s essentially a ranking system based on the type of selectors used in the rule.

Each CSS selector is assigned a specificity score:

• Inline styles: 1000 points (e.g., style="color: red")

• ID selectors: 100 points (e.g., #header)

• Class, attribute, and pseudo-class selectors: 10 points (e.g., .btn, [type="text"], :hover)

• Element and pseudo-element selectors: 1 point (e.g., p, h1, ::before)

The total score of a rule is calculated based on how many of each type of selector it contains. The rule with the highest specificity is applied. In case of a tie, the rule defined later in the stylesheet takes precedence.

For example:

/* Score: 101 (1 ID + 0 class + 1 element) */
#menu li {
  color: blue;
}
/* Score: 11 (0 ID + 1 class + 1 element) */
.nav li {
  color: red;
}

In this case, the blue color will be applied to <li> elements within #menu.

Understanding specificity is crucial for managing large stylesheets and preventing conflicts or unintended overrides.

What is Superflex.ai?

Instead of handing designs off to developers or rewriting components from scratch, Superflex turns your Figma files directly into clean, modern React code. It understands structure, style, and intent—so what you design is exactly what gets built. No translation layer, no back-and-forth, just seamless execution from idea to interface.