select second child

Question

I am trying to use this to select the second a tag from a list:

.container li a:first-child + a { ... }

but it doesn't seem to work. Is there another, ideally pure CSS way (other than a:nth-child(2)) or can anyone see where I have gone wrong?

Answer 1

Make sure your <li> actually has two <a> elements as its first two children, and not some other elements around them since those may be invalidating the :first-child and adjacent sibling selectors.

If you just want to select the second <a> element regardless of what other types of elements there are in your <li>, use this selector:

.container li a:nth-of-type(2)

If your <li> will only have exactly 2 <a> elements, you can use the general sibling combinator ~ for bonus IE7/IE8 support:

.container li a ~ a

Or did you mean to find the <a> element in the second <li> rather than the second <a> element in a <li> (since "list" probably refers to <ul> or <ol> here)? If so, you'll want either of these selectors:

.container li:first-child + li a
.container li:nth-child(2) a

Answer 2

I suspect your anchors are within list items:

<ul class="container">
    <li><a href="">...</a></li>
    <li><a href="">...</a></li>
    <li><a href="">...</a></li>
</ul>

In that case, you have to rewrite the style to:

.container li:first-child + li a { ... }