:first-child selector or equivelant

Question

I want to style the first list item of a UL, the list item is encased in an <a> tag.

I would have thought it would be simple, just this: http://jsfiddle.net/PHhFX/ but that isn't working.

Anyone any clue?

Answer 1

You're not supposed to encase a <li> in an <a> — in your HTML you can only have your <li> elements as children of the <ul>.

You probably meant to do it the other way around (<a> within <li>), then select

ul li:first-child

jsFiddle preview

Answer 2

It should work like this: http://jsfiddle.net/PHhFX/11/

CSS markup:

ul li:first-child {
    border: 1px solid #000;
} 

HTML markup:

<ul>
    <li><a href="a">AAA</a></li>
    <li><a href="b">BBB</a></li>
    <li><a href="c">CCC</a></li>
</ul>

p.s.: you shouldn't wrap <li> elements with <a> elements. Remember, after a <ul> comes a <li>

Hope it helps! ​

Answer 3

Here you go, fixed your html and css:

Html:

<ul>
    <li><a href="a">AAA</a></li>
    <li><a href="b">AAA</a></li>
    <li><a href="c">AAA</a></li>
</ul>​

And css:

ul li:first-child {
  border: 1px solid #000;
}    ​

Here is live example in jsFiddle

Answer 4

The HTML5 spec details that the li element may be contained by the following elements:

• ol
• ul
• menu

You'll note that a is not among them.

Answer 5

Link tags are not valid children of lists (<ul> or <ol>) see: Is anything except LI's allowed in a UL?

You must have the links inside the list-items:

<li><a href="a">AAA</a></li>

and so:

ul li:first-child a{
  border: 1px solid #000;
}   

see: http://jsfiddle.net/PHhFX/17/

Answer 6

Use ul a:first-child>li ​instead of ul a:first-child ​ but this is a hack. Border is not inherited property.