I’m sure there’s a simple mistake I’m making in the css below, but I’m trying to target anchor element of the first-child of the ul element and apply formatting to it.
Can someone tell me what I’m doing wrong in the css first-child selector?
<div class="footer">
<div class="menu">
<ul>
<li><a href="#">First Child Link</a></li>
<li><a href="#">About Us</a></li>
</ul>
</div>
</div>
.footer ul li {display:inline-block; }
.footer .menu ul li a {display:block; float:left; padding:0 10px;border-left:1px solid #ccc;}
.footer .menu ul li:first-child a {padding-right:0 !important; border:none !important;}
Remove the !importants as not only are they unnecessary (your new code is both more specific AND comes later) but potentially confuse you.
First test your first-child on the child itself:
.footer ul li:first-child {background-color: #00f; overflow: hidden;}
(added the overflow because the anchors are floated)
Other than the fact that you might have more HTML markup than necessary, you seem to be using first-child properly.
When testing it, though, for now try to keep the same format as you used for regular a’s
padding: 0 10px 0 0; border-right: 0;
just because if you’re testing out a feature you want to know if you’ve used the feature correctly… which is easiest if, for now, everything else is the same.
Update: I had a malformed anchor tag upstream from the footer menu. Correcting it has resolved the problem. Thanks for your help.
i think you what you wanted to do was this:
.footer ul li {display:inline-block; }
.footer .menu ul li a {display:block; float:left; padding:0 10px;border-left:1px solid #ccc;}
.footer .menu ul li:first-child a {padding-left:0 ;border:none }