Overriding a css property

Question

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)??

Andrew Moore · Answer 1 · 2011-03-16T12:30:21.400

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.

score 4 · Accepted Answer · answered Mar 16 '11 at 12:23

4

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;
}

answered Mar 16 '11 at 12:23

Stephan Muller

27,018
16
85
126

@Stephan: 3rd style(one which starts with body) is not working. let me check the other two. Thxs. – Arjun Mar 16 '11 at 12:38
@Stephan: check your first 1st statement a.addAnother.another,write answer is a.another.addAnother – sandeep Mar 16 '11 at 12:47
2

@sandeep, why would that make any difference? When the same element has two classes, it doesn't matter which order you list them in, as far as I know. – Michael Martin-Smucker Mar 16 '11 at 13:09
@Arjun: If it isn't working, then there is something else going on with your stylesheets. @Stephan: Dunno, but +1 from me. – Andrew Moore Mar 16 '11 at 13:57

score -3 · Answer 3 · answered Mar 16 '11 at 12:21

-3

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

answered Mar 16 '11 at 12:21

Daniel Moura

7,816
5
35
60

`!important` has the tendency to turn a good stylesheet into a complete mess, and it definitely isn't a substitute for understanding the specificity of your own CSS rules. – Michael Martin-Smucker Mar 16 '11 at 12:40

score -3 · Answer 4 · answered Mar 16 '11 at 12:21

-3

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;
}

answered Mar 16 '11 at 12:21

Seth

6,240
3
28
44

1

Please don't use !important, it will mess up your CSS. See http://stackoverflow.com/q/3706819/124238 – Stephan Muller Mar 16 '11 at 12:22
@Seth: thxs, its working for now. @Stephan: what would be the alternative way of achieving this? thxs. – Arjun Mar 16 '11 at 12:26
@Arjun: See my answer on how specificity affects CSS rule declarations. – Andrew Moore Mar 16 '11 at 12:28
Lol, or the ony by Andrew Moore – Stephan Muller Mar 16 '11 at 12:31
Downvotes for using semantic CSS...very strange indeed. While it's not the best solution for every problem, !important is valid CSS and should be used when necessary. – Seth Mar 16 '11 at 14:52
1

@Seth, it's been mentioned elsewhere (particularly Stephan's link) that `!important` was created to allow users to override website styles, mostly for accessibility reasons. I agree that in those situations it should be used because it's fairly necessary. Web developers, on the other hand, probably shouldn't be encouraged to use it as an alternative to understanding the cascade and specificity of their own style rules. – Michael Martin-Smucker Mar 16 '11 at 16:01

Overriding a css property

4 Answers4