CODEWITHSUNDEEP
cssless
StudioTime
StudioTime

Reputation: 23999

First-child selector in CSS .less file

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?

Upvotes: 3

Views: 10736

Answers (3)

StudioTime
StudioTime

Reputation: 23999

As paulie_d said, it does work, I had the <a href="#"></a> outside the <li>, once I moved it inside as below it works ok.

<nav role='navigation'>
   <ul class="footerLinks">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Clients</a></li>
      <li><a href="#">Contact Us</a></li>
   </ul>
</nav>

Upvotes: 0

Giulio
Giulio

Reputation: 131

Maybe if you replace li with ul (or ol, depends on the tag you have), it removes the border of the first li.

Upvotes: 0

Richa
Richa

Reputation: 3289

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;
}

Upvotes: 2

Related Questions