How do I override a style?

[livewire1974]

Hi,
I have the following definitions



ul#nav{
margin:0;
font-size:77%;
text-align:right;

clear:right;
padding:0 0 1px 0px;
}
ul#nav li{
color: #2B82AC;
display:inline;
}
ul#nav li a{
font-weight:bold;
color: #2B82AC!important;
}
ul#nav li a:hover{
text-decoration: underline;
color: #999!important;
}

li.viewq{
color:#ffffff;
background-color:#669933;
padding:0 0px 1px;
margin:0 0px 0 0px;

}


and here is my html



<ul id="nav">
<li><a href="index.php">Home</a> | </li>
<li><a href="about.php">About</a> | </li>

<li><a href="contact.php">Contact Us</a> | </li>
<li><a href="benefits.php">Member Benefits</a> | </li>
<li><a href="suppliers.php">Suppliers</a> | </li>
<li><a href="advertise.php">Advertise</a> | </li>

<li class="viewq"><a href="links.php">Useful Links</a></li>
</ul>


li.viewq does not seem to be getting picked up? I want to have the "Useful links" with white text and a block around it of color #669933;

I bet this is simple?


Thanks in advance.

[cbVision]

Try

ul#nav li.viewq {color:#ffffff; background-color:#669933; padding:0 0px 1px; margin:0 0px 0 0px;}

[rpgfan3233]

If I'm understanding the rules for calculating specificity, ul#nav li has a specificity of 102, but li.viewq has a specificity of 11. Obviously the first declaration would "win".

However, ul#nav li.viewq has a specificity of 112. That one would work. :D

[livewire1974]

If I'm understanding the rules for calculating specificity, ul#nav li has a specificity of 102, but li.viewq has a specificity of 11. Obviously the first declaration would "win".

However, ul#nav li.viewq has a specificity of 112. That one would work. :D

it does not seem to be working for me :(

[DustFrog]

I'm using FF2, and I see the green-blocked background; however, the text isn't white. I'm assuming this is what you mean by "it does not seem to be working for me".

Try overriding the <a> tag as well with the colors you want. Cut 'n' paste the following sample CSS:

ul#nav li.viewq a{
font-weight:bold;
color: #fff!important;
}
ul#nav li.viewq a:hover{
font-weight:bold;
color: #000!important;
}

[rpgfan3233]

It isn't working because you used !important in your original declaration and because you should be targeting the a element instead of li.viewq.