Geek asks and answers

Nth-child is not working properly

When I add divs along with objects that I use nth-child in, it seems to not work.

I would be grateful for any help with this.

<html>
<style>
.documents > a:nth-child(2) {
    border:1px solid red;
}
</style>

<div class="documents">
    <!-- NO DIVS: WORKS FINE -->
    <a href="#">Test</a>
    <a href="#">Test</a>
    <a href="#">Test</a>
    <a href="#">Test</a>
</div>
<br />
<div class="documents">
    <div></div><!-- ONE DIV: STARTS WITH THE FIRST OBJECT -->
    <a href="#">Test</a>
    <a href="#">Test</a>
    <a href="#">Test</a>
    <a href="#">Test</a>
</div>
<br />
<div class="documents">
    <div></div><div></div><!-- TWO DIVS: DOES NOT WORK -->
    <a href="#">Test</a>
    <a href="#">Test</a>
    <a href="#">Test</a>
    <a href="#">Test</a>
</div>
</html>

http://jsfiddle.net/nwrhU/

+5
source share
1 answer

This is not a buggy; it was just not clear how it worked :nth-child().

div , a, , ( :nth-child(2)). , div, ; , a , a . div, div , a , a:nth-child(2) -.

a, , a:nth-of-type(2) .

+14

More articles:


All Articles