Question

Here is my HTML:

<header id="banner" class="body">
    <h1><a href="#">New UGS Project! <br><strong>This is the sub-title</strong></a></h1>

    <nav><ul>
        <li><a href="#">home</a></li>
        <li><a href="#">portfolio</a></li>
        <li><a href="#">blog</a></li>
        <li><a href="#">contact</a></li>
    </ul></nav>

</header><!-- /#banner -->

And my CSS:

#banner nav a:first-child:hover{
    -moz-border-radius-topleft: 8px;
    -webkit-border-top-left-radius: 8px;
    -moz-border-radius-bottomleft: 8px; 
    -webkit-border-bottom-left-radius: 8px;
}

I would like to select ONLY the first link, “home”, to apply the border radius. I am struggling with this CSS3 selector…

Answer 1

a has no first-child. li does.

#banner nav ul > li a:first-child:hover{
    -moz-border-radius-topleft: 8px;
    -webkit-border-top-left-radius: 8px;
    -moz-border-radius-bottomleft: 8px; 
    -webkit-border-bottom-left-radius: 8px;
}