Search code examples
csscss-selectorscss-specificity

Specific question on CSS Specificity

I have a very specific question on CSS Specificity, something which I could not clearly understand on; http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

If I have 2 selectors which define non-contradicting properties/attributes, will both of the attributes still get applied OR the way it works is, it just compares the selectors, without bothering what is defined inside them.

So if we have;

.menu1 {color:red}
p.menu1 {font-size:10px}

Here both the selectors refer to "menu1", but define unrelated attribues (color/font-size)

So my question is does the Specificity still matter and only 1 of the 2 will be considered ? My question is more about how the actual implementation happens.

Solution

  • No, in this case the specificity does not matter as you are simply adding an extra property to the menu1 class, which isn't changing any existing rules. However, if you reverse the order of the rules and attempt to override color:

    p.menu1 {color:blue}
.menu1 {color:red}

    then the less specific rule .menu1 {color:red} will not override the more specific p.menu1 {color:blue}, even though the 'red' rule appears after the 'blue' rule (try it out).

    Of course, if you change the second rule to p.menu1 {color:red} it will override, as the two rules would then have the same specificity.