Question

I have this code:

<div id="navigation">
        <ul>
            <li><a href="Default.aspx">Open POs</a></li>                              
            <li><a href="WebVisibility.aspx">Visibility</a></li>
            <li><a href="#">Live</a></li>
            <li><a href="#">Reports</a></li>
        </ul>
    </div>

And this css code:

        #navigation
    {
        float: left;
        width: 1024px;
        background:#0386ce; 
    }

    #navigation ul
    {
        margin: 0;
        padding: 0;
    }

    #navigation ul li
    {
        list-style-type: none;
        display: inline;    
    }

    #navigation li a
    {
        display: block;
        float: left;
        padding: 1px 5px;
        color:#fff; 
        font-size: 14px;
        border-left: 1px solid #000;
    }

#navigation li a:hover { background:#000; }

    #navigation li a:first-child
    {
        border-left:none;
    }

When trying to remove the first separator using the last line of css code (...) border-left:none; it removes all separators.

What am I doing wrong here?

Answer 1

you need to access the first li. Instead you’re accessing the first a in any li in #navigation.

Try this:

#navigation li:first-child a
{
   border-left:none;
}