CODEWITHSUNDEEP
csshtmltagsstyles
Joaolvcm
Joaolvcm

Reputation: 1993

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

Upvotes: 0

Views: 834

Answers (4)

Magical Briefcase
Magical Briefcase

Reputation: 17

you can use :not() pseudo-class, The :not() CSS pseudo-class represents elements that do not match a list of selectors. Since it prevents specific items from being selected, it is known as the negation pseudo-class. so you can fix code like this:

.main a:not(.exception){
color: #3b5998;
outline-style: none;
text-decoration: none;
font-size: 11px;
font-weight: bold;
text-decoration: none;
}

.exception{
color: #0498ba;
font-family: Verdana, sans-serif;
font-size: 30px;
letter-spacing: 2px;
margin: 0 0 0;
padding: 0;
font-weight: bold;
text-decoration: none;
}
<div class="main">
    <a href="#" class="exception">CLickA</a>
    <br/>
    <a href="#">CLickB</a>
    <br/>
    <a href="#">CLickC</a>
</div>

Upvotes: 0

Joshua Dwire
Joshua Dwire

Reputation: 5443

In css, orders are also determined by how specific the selector is, so try changing .exception to .main a.exception.

jsFiddle: http://jsfiddle.net/jdwire/DFNyW/2/

Upvotes: 1

Brandon
Brandon

Reputation: 993

.main a is more specific then .exception. I think what you are going for is:

.main a{
  /* Links Scheme */
}

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

Upvotes: 1

Ryan Kinal
Ryan Kinal

Reputation: 17732

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.

Upvotes: 5

Related Questions