CSS Specificity Tutorial: How Specificity Works in CSS with Examples

INTRODUCTION

CSS specificity is a scoring system that browsers use to determine which CSS rule should be applied when multiple rules could affect the same element. Think of it as a weight or priority system where more specific selectors override less specific ones.

When the browser encounters conflicting CSS rules, it doesn't just apply the last one it reads. Instead, it calculates the specificity of each rule and applies the one with the highest specificity score.

The Specificity Hierarchy

CSS specificity follows a four-category hierarchy, often represented as four numbers: a, b, c, d where:

• a = Inline styles → counts as 1 if present, otherwise 0
• b = Number of ID selectors
• c = Number of class selectors, attributes, and pseudo-classes
• d = Number of element selectors and pseudo-elements

1. Inline Styles (a = 1)

Inline styles have the highest specificity value of 1-0-0-0. These are styles applied directly to an element using the style attribute.

2. IDs (b = 1)

ID selectors have a specificity value of 0-1-0-0. Each ID selector adds 0-1-0-0 to the specificity score.

3. Classes, Attributes, and Pseudo-classes (c = 1)

This category includes class selectors, attribute selectors, and pseudo-classes, each contributing 0-0-1-0 to the specificity score.

4. Elements and Pseudo-elements (d = 1)

Element selectors and pseudo-elements have the lowest specificity value of 0-0-0-1.

5. The !important Declaration

The !important declaration overrides normal specificity calculations. It gives a rule the highest priority, regardless of specificity.

6. Universal Selector and Combinators

The universal selector (*), combinators (+, ~, >), and negation pseudo-class (:not()) don't add to specificity.

7. Inherited Styles

Inherited styles have no specificity. Any directly targeted rule, regardless of how low its specificity, will override inherited styles.

Examples

Example 1

• No inline styles → a = 0
• No ID → b = 0
• No class/attribute/pseudo-class → c = 0
• One element → d = 1

Example 2

• No inline → a = 0
• No ID → b = 0
• Two classes → .card and .title → c = 2
• No element → d = 0

Example 3

• No inline → a = 0
• one ID → #main-nav → b = 1
• No classes → c = 0
• one element → anchor → d = 1

Example 4

• No inline styles → a = 0
• No ID → b = 0
• No class/attribute/pseudo-class → c = 0
• Four element → d = 4

!important

The !important declaration is a special rule in CSS used to give higher priority to a specific CSS property. When a style is marked with !important, it overrides all other conflicting rules, even those with higher specificity, unless another rule also has !important.

selector {
  property: value !important;
}

Example - This ensures that all paragraph elements will have red text, even if there are other rules trying to set the color to something else.

p {
  color: red !important;
}

What If Two Rules Have !important?

When two CSS rules both use !important, the browser will still need to decide which one wins. In this case, the normal specificity rules and source order are used to resolve the conflict. Let’s break it down:

• Compare specificity - The rule with the higher specificity takes precedence.
• If specificity is equal, check source order - The rule that appears later in the stylesheet or in a stylesheet that is included later will win.

Example - The color will be blue, because #header has higher specificity than .main-title.

<style>
  #header {
    color: blue !important; /* Specificity: 0,1,0,0 */
  }

  .main-title {
    color: red !important;  /* Specificity: 0,0,1,0 */
  }
</style>

<h1 id="header" class="main-title">Hello!</h1>

!important impact on cascade origin order

The !important rule in CSS alters the normal cascade order, especially in the context of origin order. Here's a detailed explanation of how it affects the cascade origin hierarchy:

CSS Cascade Origins (from lowest to highest priority):

1. User Agent Styles (browser defaults)
2. User Styles (set by the user in browser settings)
3. Author Styles (your CSS)
4. Author Styles with !important
5. User Styles with !important
6. User Agent Styles with !important (rarely relevant)

!important impact on Cascade Layers

In normal styles (without !important), the browser follows the order in which layers are created. The first layer written has the lowest priority, and the last one has the highest. Any styles that are not inside a layer come after all the layered styles.

But for styles marked with !important, the order is flipped. All !important styles that are not inside a layer are grouped together in a hidden layer. This group is stronger than all normal styles, but weaker than any !important styles inside layers.

Among !important layered styles, the ones in layers declared earlier have higher priority than those in layers declared later.

Frequently Asked Questions (FAQ)

#box {
  color: blue !important;
} /* Specificity: 100, important */

p {
  color: red !important;
} /* Specificity: 1, important */