CODEWITHSUNDEEP
csspseudo-classcss-selectors
user2586036
user2586036

Reputation: 41

last-child and first-child selectors are not working

I am building a navbar. This is what I want;

change the background-color on the link when hoover over it. first and last link background should have round corners.

The problem is that either all links get rounded corner or none does!

CSS

   nav {
       width:100%;
       line-height:2;
   }
   nav ul {
       list-style:none;
   }
   nav li a {
       text-decoration:none;
       color:white;
       float:left;
       width:90px;
       display:block;
       background-color:blue;
       padding-left:10px;
   }
   nav li a:first-child {
       border-radius:5px;
   }
   nav li a:last-child {
       border-radius:5px;
   }
   nav li a:hover {
       color:blue;
       background-color:white;
   }

HTML

<nav>
    <ul>
        <li><a href="#">Hem</a>
        </li>
        <li><a href="#">om oss</a>
        </li>
        <li><a href="#">hitta hit</a>
        </li>
        <li><a href="#">Kontakta</a>
        </li>
    </ul>
</nav>

Upvotes: 0

Views: 1474

Answers (1)

gespinha
gespinha

Reputation: 8497

What you are looking for is something like this?

http://jsfiddle.net/gespinha/mkDWj/2/

You should trigger the a within the first and last li, not the first and last a within an li element, because all li only have one a (which is automatically its own first and last.

You other issue was that you were assigning all borders to have the same radius, when you just want the edge borders to have a radius value.

CSS

nav li:first-child a {
    border-radius:5px 0 0 5px;
}
nav li:last-child a {
    border-radius:0 5px 5px 0;
}

For more detailed information on the border-radius attribute check this documentation http://www.w3schools.com/cssref/css3_pr_border-radius.asp

Upvotes: 2

Related Questions