First-child selector in CSS .less file

Question

I have a list of links in a footer and want add a left border to each one of them apart from the first, I'm trying the following but it removes all the left borders:

ul.footerLinks {
margin:0 auto;
li{
    display: inline-block;
    zoom:1;
    *display:inline;
    color:#eee;
    padding:4px 14px;
    border-top:1px solid rgba(0,0,0,0);
    border-left:1px solid #fff;
    &:hover {
        color:#fff;
        border-top:1px solid #fff;
    }
    &:first-child {
        border-left:none;
    }
}

}

I also tried adding the border to the right and using :last-child but same result, all borders disappeared.

Anything obviously wrong?

Answer 1

You can try something like below . Even i am new, just trying to help.

li{
        display: inline-block;
        zoom:1;
        *display:inline;
        color:#eee;
        padding:4px 14px;
        border-top:1px solid rgba(0,0,0,0);

        &:hover {
            color:#fff;
            border-top:1px solid #fff;
        }
       &:not(:first-child) {
        border-left:1px solid #fff;
    }
    }

Or Simply

    li{
            display: inline-block;
            zoom:1;
            *display:inline;
            color:#eee;
            padding:4px 14px;
            border-top:1px solid rgba(0,0,0,0);

            &:hover {
                color:#fff;
                border-top:1px solid #fff;
            }

        }

li:not(:first-child) {
     border-left:1px solid #fff;
}