CSS Selector Specificity: Understanding the Cascade Priority Rules

Overview

When an element in the browser has a conflict of styles, the browser uses a set of rules to determine which style should be rendered. This set of rules is defined as CSS Selector Specificity.

For instance, for an element, if we have the following DOM and CSS classes,

.myClass {
    color: yellow;
}

<div style="color: red;" class="myClass">My Text</div>

In this case, the color will be red, since the inline style has higher weight.

Calculation

The browser uses an array of four elements, where the previous index has higher priority. Consider these four elements a a, b, c and d.

[a, b, c, d]

A = Inline styles

B = Number of selector IDs

C = Classes, Pseudo Classes, and Attributes

D = Elements and Pseudo-Elements

We calculate A, B, C, D as follows,

body.home #sidebar .menu li a:hover {
  color: gold;
}

Let’s break it down:

body → element → +1 to d
.home → class → +1 to c
#sidebar → ID → +1 to b
.menu → class → +1 to c
li → element → +1 to d
a → element → +1 to d
:hover → pseudo-class → +1 to c

Specificity: 0,1,3,3

Rules of Specificity

Higher specificity wins.
If specificity is the same, the last declared rule in the CSS wins.
Inline styles have the highest specificity (except !important).
!important can override normal specificity but should be used sparingly.

Best Practices

Write CSS with low specificity, so we can override it later
Avoid nested selectors and keep them shallow

CSS Selector Specificity

Comments

Node.js & JavaScript

Understanding CSS Display Property

More from this blog

The Comprehensive Guide to REST API Architecture and Conventions

JavaScript Loading Strategies in Web Page: async and defer

DOM Positioning

Understanding CSS Display Property

Overview

Calculation

Rules of Specificity

Best Practices

Command Palette

Comments

Node.js & JavaScript

Understanding CSS Display Property

More from this blog

Overview

Calculation

Rules of Specificity

Best Practices