CSS !important not taking precedence?

Question

I have the following dom structure:

<div class="ui-tabs">
<ul>
    <li class="ui-state-default ui-tabs-selected ui-state-active">
         <a href="#">Text</a>
    </li>
</ul>

And the following CSS markup:

.ui-tabs .ui-state-active {
background: #084;
color: #E6EFEA !important;
}

a:link {
color: #00C;
}

I cannot get the first color (E6EFEA) to take precedence. I've tried it on FireFox and Chrome, Chrome even shows the a:link property scratched out ... as if some other color is taking precedence, but still renders blue (00C). Just to make sure I've taken out every other #00C refeence in the CSS file. Any ideas?

I've also put up a crude example on JSBin.

Answer 1

!important only works when the attribute is being applied to the same element. In this case you are applying it to the <a> element's parent, and it is being set there (throw some text outside of the <a> to convince yourself).

If you want to override the color of the <a> element itself, your CSS rule will have to apply to the <a>, not an ancestor.

Answer 2

.ui-tabs .ui-state-active a:link {
color: #E6EFEA !important;
}

This should do the deed.

You need to set your color on the a tag not the .ui-state-active class.