Question

I was under the impression that if you put a line of code in CSS further down the style sheet it should be recognized as more important, such as:

.border{
border-right:1px solid #fff;
}

.no-border{
border-right:none;
}

So shouldn’t the no-border class over-write the first class? This is not happening on a project and do not understand why?

thanks

Answer 1

As a quick rule of thumb, the last rule is the one that counts.

However, this is not the case in many scenarios. You need to read up on CSS Specificity.

Equal specificity: the latest rule is the one that counts. “If you have written the same rule into your external style sheet twice, than the lower rule in your style sheet is closer to the element to be styled, it is deemed to be more specific and therefore will be applied.”

When selectors have an equal specificity value, such as

#content h1 { padding: 5px;}
#content h1 { padding: 10px;}

where both rules have the specificity 0, 1, 0, 1, the latter rule is always applied.

Unequal specificity: the more specific rule is the one that counts. “A selector can contain one or more reference points, the greater the specificity rating of these reference points the more specific your rule is.” Browsers select the most specific rules to display.