CSS nth-child misses element

Question

Seems like css nth-child missed its target, any thoughts?

jsFiddle source

HTML:

<a href="#">red</a>
<br />
<a href="#">none</a>
<br />
<a href="#">gray</a>

CSS:

a:nth-child(1) {
    color:red;
}
a:nth-child(3) {
    color:gray;
}

Answer 1

Use nth-of-type() instead of nth-child() , it will work perfectly if you are removed the <br/> tag , because as @FritsvanCampen comment it counts as a child

a:nth-of-type(1) {
    color:red;
}
a:nth-of-type(3) {
    color:gray;
}

for better understanding refer : http://css-tricks.com/the-difference-between-nth-child-and-nth-of-type/

Fiddle