📚 How to Increase CSS Class Selector Specificity to Beat the ID Selector Without Using Important

Recently, while working on some legacy code, I had to figure out how to overwrite ID selector styles without using !important.

The CSS was similar to this

<div id="parent">
  <div class="child">Content</div>
</div>

<style>
  /* specificity 100 + 10 = 110 */
  #parent .child {
    color: red;
  }

  /* specificity 10 */
  .child {
    color: yellow;
  }
</style>

This results in a text with red color, but in my case, I needed to make the text yellow.

Normally, I would just refactor the CSS and HTML, but in this case, I couldn’t change the HTML and order of CSS due to some legacy code.

The easy solution would be to use an infamous !important keyword to overwrite everything, but I didn’t want to go that way.

Using attribute selector

The better way is to change the ID selector to the attribute selector. Instead of #parent it's possible to use [id="parent"]. This has the same specificity as a class selector.

Now instead of specificity 110, it is down to 20.

/* specificity 10 + 10 = 20 */
[id="parent"] .child {
  color: red;
}

/* specificity 10 */
.child {
  color: yellow;
}

Chaining the selector with itself

Now I had to increase the .child specificity above 20 to beat the [id="parent" .child" selector. One way to achieve that is to chain the class selector with itself.

The specificity of .child is 10. The specificity of .child.child.child is 30.

<div id="parent">
  <div class="child">Content</div>
</div>

<style>
  /* specificity 10 + 10 = 20 */
  [id="parent"] .child {
    color: red;
  }

  /* specificity 10 + 10 + 10 = 30 */
  .child.child.child {
    color: yellow;
  }
</style>

This is an easy way to bump up specificity without adding additional classes or knowing about the context where the item will be placed.

I find this better than using !important, but it is still a hack. If possible, try to avoid this.