CSS: Specificity

Specificity is calculated using a convention.

We have 4 slots, and each one of them starts at 0: 0 0 0 0. The slot at the left is the most important, and the rightmost one is the least important.

Like it works for numbers in the decimal system: 1 0 0 0 is higher than 0 1 0 0.

The first slot, the rightmost one, is the least important.

We increase this value when we have an element selector. An element is a tag name. If you have more than one element selector in the rule, you increment accordingly the value stored in this slot.

Examples:

p {} /* 0 0 0 1 */

span {} /* 0 0 0 1 */

p span {} /* 0 0 0 2 */

p > span {} /* 0 0 0 2 */

div p > span {} /* 0 0 0 3 */

The second slot is incremented by 3 things:

  • class selectors
  • pseudo-class selectors
  • attribute selectors (we’ll learn them very soon)

Every time a rule meets one of those, we increment the value of the second column from the right.

Examples:

.name {} /* 0 0 1 0 */

.users .name {} /* 0 0 2 0 */

[href$='.pdf'] {} /* 0 0 1 0 */

:hover {} /* 0 0 1 0 */

Here’s what happens when you combine “slot 2” selectors with “slot 1” selectors:

div .name {} /* 0 0 1 1 */

a[href$='.pdf'] {} /* 0 0 1 1 */

.pictures img:hover {} /* 0 0 2 1 */

“Slot 3” holds the most important thing that can affect your CSS specificity in a CSS file: the id.

Every element can have an id attribute assigned, and we can use that in our stylesheet to target the element.

Examples:

#name {} /* 0 1 0 0 */

.user #name {} /* 0 1 1 0 */

#name span {} /* 0 1 0 1 */

“Slot 4” is affected by inline styles. Inline styles are CSS rules defined in the HTML itself, using the style attribute.

Any inline style will have precedence over any rule defined in an external CSS file, or inside the style tag in the page header.

Example:

<p style="color: red">Test</p> /* 1 0 0 0 */

Even if another rule in the CSS defines the color, this inline style rule is going to be applied.

Except for one case - if !important is used, which fills “slot 5”

A note on !important

Specificity does not matter if a rule ends with !important:

p {
  font-size: 20px !important;
}

That rule will take precedence over any rule with more specificity.

Adding !important in a CSS rule is going to make that rule be more important than any other rule, according to the specificity rules.

The only way another rule can take precedence is to have !important as well, and have higher specificity in the other less important slots.

Generally, !important should have no place in your CSS files. I use it for quick testing sometimes, to find out why a rule is not applied. If it does not appear with !important, there’s a problem somewhere.

You can use the site https://specificity.keegan.st/ to perform the specificity calculation for you automatically.

Lessons in this unit:

0: Introduction
1: Colors
2: More selectors
3: Cascade
4: ▶︎ Specificity
5: Units
6: Advanced selectors
7: Typography
8: The box model
9: The display property
10: Responsive design
11: DEMO Create a simple design
Are you intimidated by Git? Can’t figure out merge vs rebase? Are you afraid of screwing up something any time you have to do something in Git? Do you rely on ChatGPT or random people’s answer on StackOverflow to fix your problems? Your coworkers are tired of explaining Git to you all the time? Git is something we all need to use, but few of us really master it. I created this course to improve your Git (and GitHub) knowledge at a radical level. Launching May 21, 2024. Join the waiting list!