CODEWITHSUNDEEP
csscss-selectors
TaylorMac
TaylorMac

Reputation: 9002

CSS first-child selector not working properly

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...

Upvotes: 0

Views: 7951

Answers (3)

Simone
Simone

Reputation: 21292

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

Upvotes: 1

biziclop
biziclop

Reputation: 14626

Each a is wrapped into an li element, so a is always the the first (and last) child of its parent li. You have to select the first li of its parent ul element. Some example selectors:

#banner nav li:first-child a:hover {
#banner nav li:first-child:hover a {
#banner nav li:first-child:hover {

Upvotes: 6

Marco Miltenburg
Marco Miltenburg

Reputation: 6138

What you're looking for is this:

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

Upvotes: 3

Related Questions