CODEWITHSUNDEEP
csscss-specificity
Arjun
Arjun

Reputation: 6739

Overriding a css property

My Html is like this:

<a class="another addAnother">Add another</a>

I defined a style for the above using 'another' class like this in a external style sheet.

fieldset.associations a.another {
   color: #693;
   display: block;
   margin: 7.5px 0px 15px;
}

I am trying to override the style of tag using 'addAnother' class, like this(wherever required):

fieldset.associations a.addAnother {
   display: none;
}

But I am unable to override. Any help is appreciated.

Is there any rule that while overriding a style the selector should be same(I tried this, but no avail)??

Upvotes: 1

Views: 4509

Answers (4)

Andrew Moore
Andrew Moore

Reputation: 95434

Both your original declarations have a specificity of 0,0,2,2. If the second declaration is below the first, it should overrule it. If it doesn't, reorder your declarations or increase the specificity.

You could add the body tag in order to increase specificity:

body fieldset.associations a.addAnother {
 display: none;
}

That will increase specificity by 0,0,0,1, the minimum amount of specificity you can add.

You can also make it specific to the .another class by chaining class declarations:

fieldset.associations a.another.addAnother {
 display: none;
}

That will increase specificity by 0,0,1,0.

Here is an article explaining CSS specificity. Note that the article fails to mention that !important increase specificity by 1,0,0,0, making it near impossible to overrule.

Upvotes: 4

Stephan Muller
Stephan Muller

Reputation: 27630

Both properties have the same importance, because both selectors are equally specific. So if the second one appears first in the CSS, it needs to acquire more importance to override one that is lower down. You could override the first one by being more specific, like this:

fieldset.associations a.addAnother.another {
   display: none;
}

or

#someID fieldset.associations a.addAnother {
   display: none;
}

or

body fieldset.associations a.addAnother {
   display: none;
}

Upvotes: 4

Seth
Seth

Reputation: 6260

It would ultimately depend on where those two styles are in your CSS, but you can't give one more importance like this:

fieldset.associations a.addAnother {
    display: none !important;
}

Upvotes: -3

Daniel Moura
Daniel Moura

Reputation: 7956

fieldset.associations a.addAnother {
   display: none !important;
}

Upvotes: -3

Related Questions