How to Override a CSS Class

You may have wondered,

How does my browser determines which CSS class to use when I have multiple classes targeting the same element?

Of course, your browser is a program that follows a simple set of rules. There is nothing random about how your browser decides the hierarchy of your CSS classes. Here is how it does it.

Calculating Specificity

Style sheets can override conflicting style sheets based on their level of specificity, where a more specific style will always win out over a less specific one. It is simply a counting game to calculate the specificity of a selector.

  1. Count the number of ID attributes in the selector.
  2. Count the number of CLASS attributes in the selector.
  3. Count the number of HTML tag names in the selector.

Finally, write the three numbers in exact order with no spaces or commas to obtain a three digit number. (Note, you may need to convert the numbers to a larger base to end up with three digits.) The final list of numbers corresponding to selectors will easily determine specificity with the higher numbers winning out over lower numbers. Following is a list of selectors sorted by specificity:

#id1         {xxx} /* a=1 b=0 c=0 --> specificity = 100 */
UL UL LI.red {xxx} /* a=0 b=1 c=3 --> specificity = 013 */
LI.red       {xxx} /* a=0 b=1 c=1 --> specificity = 011 */
LI           {xxx} /* a=0 b=0 c=1 --> specificity = 001 */

So,

100 > 13 > 11 > 1 .

Which means,

#id1 {xxx} > UL UL LI.red {xxx} > LI.red {xxx} > LI {xxx}

To make it easy, when two rules have the same weight, the last rule specified wins.

Override a CSS Class Manually

The !important rule is a way to make your CSS cascade but also have the rules you feel are most crucial always be applied. A rule that has the !important property will always be applied no matter what specificity count your class (selector) has. So if you wanted to make sure that a property is always applied, you would add the !important property to the tag. Below are some examples:

p { /* a=0 b=0 c=1 --> specificity = 001 */
    color: #ff0000;
    font-size:16px;
}
p { /* a=0 b=0 c=1 --> specificity = 001 */
    color: #000000;
    font-size:12px;
}

They both have the same specificity count, so the last one will have precedence, and our paragraphs will have the color #000000 and a font-size of 12px.

p { /* a=0 b=0 c=1 --> specificity = 001 */
    color: #ff0000 !important;
    font-size:16px;
}
p { /* a=0 b=0 c=1 --> specificity = 001 */
    color: #000000;
    font-size:12px;
}

Now, we specified that the color #ff0000 is !important, so our browser will tell our paragraph to be the color #ff0000. But our font size will be 12px because the second selector still has precedence over the first.

One thought on “How to Override a CSS Class

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>