Search code examples
csshtmltagsstyles

CSS class order

i have a main "div" with multiple divs and "a" tags and i wanted to set a "template like" css to make them all look the same, but some of the A tags need to be different so i thought about making it like this:

<div class="main">
   <a href="#" class="exception">CLick A</a>
   <br/>
   <a href="#">CLick B</a>
   <br/>
   <a href="#">CLick C</a>
   ....
</div>​

and on the css:

.main a{
  /* Links Scheme */
}

.exception{
 /* particular link css */
}​

But the browser gives preference to my "template" instead of the particular class. shouldn't the class be the most important or am i missing something?

ChromeDevTools

FIDDLE Link

PS: without the use of "!important" tag please

Solution

  • This is an issue of specificity. Since .main a includes a class and a tag name, it is more specific, and thus gets higher precedence than just a class name.

    So, to solve it, use .main .exception for your exception.