Overriding CSS properties for a specific html element

by

That’s a CSS specificity issue.

.main_section article has a higher specificity value than .special-bg selector.

In terms of value:
Inline Style > IDs > Classes, Attributes, and Pseudo-classes > Element Types and Pseudo-elements, So the calculation of Specificity of these two CSS selectors would be:

.special-bg

Inline Style    ID   (Pseudo-)Class    (Pseudo-)Element
0               0    1                 0

.main_section article

Inline Style    ID   (Pseudo-)Class    (Pseudo-)Element
0               0    1                 1

11 > 10 => .main_section article selector wins!

You could use the following:

.main_section .special-bg {
  /* Styles goes here... */
}

Further reading:

  • http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
  • http://reference.sitepoint.com/css/specificity
  • http://cssspecificity.com/

And a great tool to calculate the specificity value:

  • http://specificity.keegan.st/

Leave a Comment