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 couldnt 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 didnt 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.