DEV Community

Cover image for Selectors: Specificity in CSS
Patricia Cosma
Patricia Cosma

Posted on

Selectors: Specificity in CSS

As you write more and more code, you might observe that more than one CSS rule can be applied to an element.

By mistake, you can also double-style an element. In that case, which rule will be applied?

For situations where conflict arises, CSS applies a set of rules and rank them in a specificity hierarchy and apply the 'winner'.

Specificity Hierarchy

There are 4 categories for this hierarchy:

1. Inline styles
This looks and operates much like CSS, but with a few differences. Inline styles affect the tag they are written in directly, without the use of selectors, which are needed in CSS.

<p style="color: green">
Enter fullscreen mode Exit fullscreen mode

2. IDs
This type of selector matches an element from your code depending on the value of the ID selector.

<div id="footer">Contact me</div>

#footer {
   display: flex;
Enter fullscreen mode Exit fullscreen mode

3. (Pseudo-)classes & attributes
A pseudo-class is used to define a special state of an element such as active, focus, visited, hover and so on.

/*when the link is clicked*/
a:active {
   color: pink;
Enter fullscreen mode Exit fullscreen mode

A class would be defined just as the ID selector, with the difference that its value would be based on the class selector.

<div class="container">Hello</div>

.container {
   font-size: 2rem;
Enter fullscreen mode Exit fullscreen mode

You can also style your HTML elements that have a specific attributes or attribute values.

<a href="">Website 1</a>
<a href="" target="_blank">Website 2</a>

a[target] {
   background-color: blue;
Enter fullscreen mode Exit fullscreen mode

4. (Pseudo-)elements
CSS pseudo-elements are used to style specified parts of an element.

h1::first-letter {
  font-weight: 900;
Enter fullscreen mode Exit fullscreen mode

On the other hand, elements can be styled as simple as they come in your HTML structure.

h3 {
   border-radius: 10px;
Enter fullscreen mode Exit fullscreen mode

Calculate Specificity

  1. Start at 0
  2. Add 1000 for each inline style (this always has the highest priority - using the !important rule will override the inline style)
  3. Add 100 for each ID value
  4. Add 10 for each (pseudo-)class or attribute value
  5. Add 1 for each (pseudo-)element value.


h1.p -> 1 + 10 -> 11
h1#title -> 1 + 100 -> 101
<h1 style="color: red"> -> 1000 -> 1000
Enter fullscreen mode Exit fullscreen mode

Want to see more examples and have some exercises?
Check this and save it for later. 😍

If you enjoyed this post, you can get more relevant development content by subscribing (no spam!) to my newsletter on my website.

Thank you for reading!

Cover photo by Afif Ramdhasuma on Unsplash

Top comments (0)

Advice For Junior Developers

Advice from a career of 15+ years for new and beginner developers just getting started on their journey.