CODEWITHSUNDEEP
css
chum of chance
chum of chance

Reputation: 6300

CSS !important not taking precedence?

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.

Upvotes: 4

Views: 11204

Answers (4)

Andrea Turri
Andrea Turri

Reputation: 6500

In this way you color the dot of the list...

try this code:

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

Upvotes: 0

fcalderan
fcalderan

Reputation:

You have to specify also :link 

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

Upvotes: 0

Allan Kimmer Jensen
Allan Kimmer Jensen

Reputation: 4389

.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.

Upvotes: 1

cdhowie
cdhowie

Reputation: 169038

!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.

Upvotes: 17

Related Questions