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

Answer 1

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