Image for post
Image for post

The Basic Guide to CSS Specificity

CSS Specificity is what decides what styles are applied to elements; the more specific the CSS selector, the more weight it has in determining the style of an element.

<article id="css-rocks">
...
</article>
<style>
#css-rocks {
background-color: white;
}
article {
background-color: black;
}
</style>
Image for post
Image for post
In Chrome, the Styles portion of the Elements tab orders styles based on their specificity and crosses out styles that get overwritten by more specific selectors

Element Selectors

These are styles using just the element as the selector:

article {
background-color: black;
}

Class Selectors

Styles that use a class in the selector:

.css-class {
background-color: black;
}

ID Selectors

Styles that use an ID in the selector:

#css-id {
background-color: black;
}

Inline Selectors

These are styles directly within the HTML applied as an attribute:

<article style="background-color: black;"> ... </article>

!important Selectors

If an individual style is declared to be !important, then it will override anything else:

article {
background-color: black !important;
}
<article id="css-rocks">
<section class="css-history">
...
</section>
</article>
<style>
#css-rocks section {
background-color: black;
}
article#css-rocks section.css-history {
background-color: white;
}
</style>
  1. Using the selector #css-rocks sectionas our first example, count each type of selector and add it to the weights. The first thing we see is #css-rocks, an ID selector. Our weight is now (0, 0, 1, 0, 0). Next we see an element selector, our weight is now (0, 0, 1, 0, 1). That was the last item in the selector, so we have our final weight. The style background-color: black; has a weight of (0, 0, 1, 0, 1).
Selector      | Type        | Resulting CSS Selector Weight
article | Element | (0, 0, 0, 0, 1)
#css-rocks | Id | (0, 0, 1, 0, 1)
section | Element | (0, 0, 1, 0, 2)
.css-history | Class | (0, 0, 1, 1, 2)
(0, 0, 1, 0, 1) background-color: black;
(0, 0, 1, 1, 2) background-color: white;

That’s the basic idea of CSS Specificity, but there are a few more loose ends…

Q: What happens if two styles have the same specificity?

article {
background-color: black;
}
article {
background-color: white;
}
article .css-history {
background-color: black !important; /* (1, 0, 0, 1, 1) */
color: white; /* (0, 0, 0, 1, 1) */
}
  1. Should the style you’re trying to override even live in the original selector? When I make a CSS component, I may set a style on the base component that doesn’t belong there. For example, if I make a .card component, I may initially believe all cards will have a white background, only to find down the line I want cards with either white or off-white backgrounds. I would remove the background color style from .card and use some .white-background or .offwhite-background helper classes to set the card’s background color.
  2. Should the overriding selector use the same chain of attributes as the one that already exists? Going off the example above, consider you have a card component you use in your website’s articles. The selector may look something like article .card. If you want to have another type of card with rounded corners, it makes sense to make a selector with article .card.card-rounded.
  3. Is this a quick-fix situation that requires an immediate (read: ugly) solution? Sometimes you need to fix a bug in prod or that demo that’s being shown in 15 minutes. The easiest and most-obviously-evil solution is to just slap an !important on the style. Another option is to search for attributes (preferably IDs) that you can add to the selector to bump up its specificity, e.g. html body #content-wrapper article#css-rocks. I prefer the former option since !important jumps out immediately as tech debt that needs to be addressed, whereas the latter may live on without raising too much of a code smell. Either way, these aren’t long-term solutions — Fix them when you have more time.
#css-rocks#css-rocks {
background-color: black; /* (0, 0, 2, 0, 0) */
}
#css-rocks {
background-color: white; /* (0, 0, 1, 0, 0) */
}
<article style="background-color: banana !important;">
...
</article>

I’m a software engineer that specializes in front-end web development. Learn more at cjmil.com.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store