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 th

Answer 1

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 { ... } 

Answer 2

Just use :nth-of-type:

.container li a:nth-of-type(2) {
    /* ... */
}

The problem here is probably that the first <a> is not the first child, or the second <a> is not adjacent to it. Regardless, :nth-of-type is the right way to do it.

---

If you have one <a> per <li>, then you probably mean .container li:nth-of-type(2) a.

Answer 3

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 4

Use nth-child(2)

.container li a:nth-child(2){....}