Reputation: 9002
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
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
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
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