First-child selector not matching intended element?

[Scott Blanchard]

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

[Stomme poes]

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.

[Scott Blanchard]

Update: I had a malformed anchor tag upstream from the footer menu. Correcting it has resolved the problem. Thanks for your help.

[dresden_phoenix]

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 }