applying css to specific li class [closed]

Question

I have a problem with my list.

I want to specify certain colors for each li element but can't seem to do it. It keeps doing it for all of them.

Here's my CSS:

#sub-nav-container ul
{
    position: absolute;
    top: 96px;
    left: 594px;
    margin: 0;
    padding: 0;
    list-style-type: none;
}

#sub-nav-container li 
{
    margin: 0;
}

#sub-nav-container a
{
    display: block;
    text-decoration: none;
    border-bottom: none;
    color: #C1C1C1;
    display: inline;         
}

li.sub-navigation-home-news  
{
    color: #C1C1C1;
    font-family: Arial;
    font-size: 13.5px;
    text-align: center;
    text-transform: uppercase;
    padding: 0px 90px 0px 0px; 
}

Here's the HTML

<div id="sub-nav-container">
    <ul id="sub-navigation-home">
        <li class="sub-navigation-home-news"><a href="#">News</a></li>
        <li class="sub-navigation-home-careers"><a href="#">Careers</a></li>
        <li class="sub-navigation-home-client"><a href="#">Client Login</a></li>
        <li class="sub-navigation-home-canada"><a href="#">CANADA</a></li>
        <li class="sub-navigation-home-usa"><a href="#">USA</a></li>
    </ul>
</div>

Answer 1

The CSS you have applies color #c1c1c1 to all <a> elements.

And it also applies color #c1c1c1 to the first <li> element.

Perhaps the code you posted is missing something because I don't see any other colors being defined.

Answer 2

You are defining the color: #C1C1C1; for all the a elements with #sub-nav-container a.

Doing it again in li.sub-navigation-home-news won't do anything, as it is a parent of the a element.

Answer 3

That's because of the <a> in there and not using the id which you do use a bit further to the top

Change it to:

#sub-navigation-home li.sub-navigation-home-news a 
{
 color: #C1C1C1;
 font-family: arial;
 font-size: 13.5px;
 text-align: center;
 text-transform:uppercase;
 padding: 0px 90px 0px 0px; 
}

and it will probably work

Answer 4

I believe it's because #ID styles trump .class styles when computing the final style of an element. Try changing your li from class to id, or you can try adding !important to your class, like this:

li.sub-navigation-home-news
{
    color: #C1C1C1; !important

Answer 5

You have specified different colors for the li elements but it is being overridden by the specified color in the a within the li. Remove color: #C1C1C1; style from a element and it should work.

Answer 6

Define them more in your css file. Instead of

li.sub-navigation-home-news 

try

#sub-navigation-home li.sub-navigation-home-news 

Check this for more details: http://www.w3.org/TR/CSS2/cascade.html#cascade