This page is part of the CSS3.info CSS selectors test. See more info on CSS3 selectors.

1. div :nth-child(1) {
   }
   
   <div>
      <div>Does this element match?</div>
   </div>

   The CSS selector should match the marked element, because it is the first and only child of the outer div element

2. div :nth-child(0n+1) {
   }
   
   <div>
      <div>Does this element match?</div>
   </div>

   The CSS selector should match the marked element, because it is the first and only child of the outer div element

3. div :nth-child(1) {
   }
   
   <div>
      <div>Does this element match?</div>
      <div></div>
      <div></div>
      <div></div>
   </div>

   The CSS selector should match the marked element, because it is the first child of the outer div element

4. div :nth-child(0n+1) {
   }
   
   <div>
      <div>Does this element match?</div>
      <div></div>
      <div></div>
      <div></div>
   </div>

   The CSS selector should match the marked element, because it is the first child of the outer div element

5. div :nth-child(2) {
   }
   
   <div>
      <div></div>
      <div>Does this element match?</div>
      <div></div>
      <div></div>
   </div>

   The CSS selector should match the marked element, because it is the second child of the outer div element

6. div :nth-child(0n+2) {
   }
   
   <div>
      <div></div>
      <div>Does this element match?</div>
      <div></div>
      <div></div>
   </div>

   The CSS selector should match the marked element, because it is the second child of the outer div element

7. div :nth-child(1n) {
   }
   
   <div>
      <div>Does this element match?</div>
      <div>Does this element match?</div>
      <div>Does this element match?</div>
      <div>Does this element match?</div>
   </div>

   The CSS selector should match all marked elements, because every element should match

8. div :nth-child(n) {
   }
   
   <div>
      <div>Does this element match?</div>
      <div>Does this element match?</div>
      <div>Does this element match?</div>
      <div>Does this element match?</div>
   </div>

   The CSS selector should match all marked elements, because every element should match

9. div :nth-child(n+1) {
   }
   
   <div>
      <div>Does this element match?</div>
      <div>Does this element match?</div>
      <div>Does this element match?</div>
      <div>Does this element match?</div>
   </div>

   The CSS selector should match all marked elements, because every element should match

10. div :nth-child(1n+1) {
    }
    
    <div>
       <div>Does this element match?</div>
       <div>Does this element match?</div>
       <div>Does this element match?</div>
       <div>Does this element match?</div>
    </div>

    The CSS selector should match all marked elements, because every element should match

11. div :nth-child(n+2) {
    }
    
    <div>
       <div></div>
       <div>Does this element match?</div>
       <div>Does this element match?</div>
       <div>Does this element match?</div>
    </div>

    The CSS selector should match all marked elements, because every element starting from the second should match

12. div :nth-child(1n+2) {
    }
    
    <div>
       <div></div>
       <div>Does this element match?</div>
       <div>Does this element match?</div>
       <div>Does this element match?</div>
    </div>

    The CSS selector should match all marked elements, because every element starting from the second should match

13. div :nth-child(even) {
    }
    
    <div>
       <div></div>
       <div>Does this element match?</div>
       <div></div>
       <div>Does this element match?</div>
    </div>

    The CSS selector should match all marked elements, because every even element should match

14. div :nth-child(odd) {
    }
    
    <div>
       <div>Does this element match?</div>
       <div></div>
       <div>Does this element match?</div>
       <div></div>
    </div>

    The CSS selector should match all marked elements, because every odd element should match

15. div :nth-child(2n) {
    }
    
    <div>
       <div></div>
       <div>Does this element match?</div>
       <div></div>
       <div>Does this element match?</div>
    </div>

    The CSS selector should match all marked elements, because every even element should match

16. div :nth-child(2n-1) {
    }
    
    <div>
       <div>Does this element match?</div>
       <div></div>
       <div>Does this element match?</div>
       <div></div>
    </div>

    The CSS selector should match all marked elements, because every odd element should match

17. div :nth-child(2n+0) {
    }
    
    <div>
       <div></div>
       <div>Does this element match?</div>
       <div></div>
       <div>Does this element match?</div>
    </div>

    The CSS selector should match all marked elements, because every even element should match

18. div :nth-child(2n+1) {
    }
    
    <div>
       <div>Does this element match?</div>
       <div></div>
       <div>Does this element match?</div>
       <div></div>
    </div>

    The CSS selector should match all marked elements, because every odd element should match

19. div :nth-child(2n+2) {
    }
    
    <div>
       <div></div>
       <div>Does this element match?</div>
       <div></div>
       <div>Does this element match?</div>
    </div>

    The CSS selector should match all marked elements, because every even element should match

20. div :nth-child(3n+1) {
    }
    
    <div>
       <div>Does this element match?</div>
       <div></div>
       <div></div>
       <div>Does this element match?</div>
    </div>

    The CSS selector should match all marked elements, because every third element should match

21. div :nth-child(-n+2) {
    }
    
    <div>
       <div>Does this element match?</div>
       <div>Does this element match?</div>
       <div></div>
       <div></div>
    </div>

    The CSS selector should match all marked elements, because the first two elements should match

22. div :nth-child(0) {
    }
    
    <div>
       <div>Does this element match?</div>
       <div>Does this element match?</div>
       <div>Does this element match?</div>
       <div>Does this element match?</div>
    </div>

    The CSS selector should not match the marked elements, because it should match no elements at all

23. div :nth-child(0n+0) {
    }
    
    <div>
       <div>Does this element match?</div>
       <div>Does this element match?</div>
       <div>Does this element match?</div>
       <div>Does this element match?</div>
    </div>

    The CSS selector should not match the marked elements, because it should match no elements at all

24. div :nth-child(1) {
    }
    
    <div>
       <div></div>
       <div>Does this element match?</div>
       <div>Does this element match?</div>
       <div>Does this element match?</div>
    </div>

    The CSS selector should not match the marked elements, because it should only match the first element

25. div :nth-child(0n+1) {
    }
    
    <div>
       <div></div>
       <div>Does this element match?</div>
       <div>Does this element match?</div>
       <div>Does this element match?</div>
    </div>

    The CSS selector should not match the marked elements, because it should only match the first element

26. div :nth-child(2) {
    }
    
    <div>
       <div>Does this element match?</div>
       <div></div>
       <div>Does this element match?</div>
       <div>Does this element match?</div>
    </div>

    The CSS selector should not match the marked elements, because it should only match the second element

27. div :nth-child(0n+2) {
    }
    
    <div>
       <div>Does this element match?</div>
       <div></div>
       <div>Does this element match?</div>
       <div>Does this element match?</div>
    </div>

    The CSS selector should not match the marked elements, because it should only match the second element

28. div :nth-child(n+2) {
    }
    
    <div>
       <div>Does this element match?</div>
       <div></div>
       <div></div>
       <div></div>
    </div>

    The CSS selector should not match the marked element, because every element starting from the second should match

29. div :nth-child(1n+2) {
    }
    
    <div>
       <div>Does this element match?</div>
       <div></div>
       <div></div>
       <div></div>
    </div>

    The CSS selector should not match the marked element, because every element starting from the second should match

30. div :nth-child(even) {
    }
    
    <div>
       <div>Does this element match?</div>
       <div></div>
       <div>Does this element match?</div>
       <div></div>
    </div>

    The CSS selector should not match the marked elements, because every even element should match

31. div :nth-child(odd) {
    }
    
    <div>
       <div></div>
       <div>Does this element match?</div>
       <div></div>
       <div>Does this element match?</div>
    </div>

    The CSS selector should not match the marked elements, because every odd element should match

32. div :nth-child(2n) {
    }
    
    <div>
       <div>Does this element match?</div>
       <div></div>
       <div>Does this element match?</div>
       <div></div>
    </div>

    The CSS selector should not match the marked elements, because every even element should match

33. div :nth-child(2n-1) {
    }
    
    <div>
       <div></div>
       <div>Does this element match?</div>
       <div></div>
       <div>Does this element match?</div>
    </div>

    The CSS selector should not match the marked elements, because every odd element should match

34. div :nth-child(2n+0) {
    }
    
    <div>
       <div>Does this element match?</div>
       <div></div>
       <div>Does this element match?</div>
       <div></div>
    </div>

    The CSS selector should not match the marked elements, because every even element should match

35. div :nth-child(2n+1) {
    }
    
    <div>
       <div></div>
       <div>Does this element match?</div>
       <div></div>
       <div>Does this element match?</div>
    </div>

    The CSS selector should not match the marked elements, because every odd element should match

36. div :nth-child(2n+2) {
    }
    
    <div>
       <div>Does this element match?</div>
       <div></div>
       <div>Does this element match?</div>
       <div></div>
    </div>

    The CSS selector should not match the marked elements, because every even element should match

37. div :nth-child(3n+1) {
    }
    
    <div>
       <div></div>
       <div>Does this element match?</div>
       <div>Does this element match?</div>
       <div></div>
    </div>

    The CSS selector should not match the marked elements, because every third element should match

38. div :nth-child(-n+2) {
    }
    
    <div>
       <div></div>
       <div></div>
       <div>Does this element match?</div>
       <div>Does this element match?</div>
    </div>

    The CSS selector should not match the marked elements, because only the first two should match

39. div :nth-child(1) {
    }
    
    <div>
       <div id='insertBefore'></div>
    </div>
    
    var ib = document.getElementById('insertBefore');
    ib.parentElement.insertBefore(document.createElement("div"), ib);

    The CSS selector should match the div element that is inserted by the Javascript code.

40. div :nth-child(1) {
    }
    
    <div>
       <div id='insertBefore'></div>
    </div>
    
    var ib = document.getElementById('insertBefore');
    ib.parentElement.insertBefore(document.createElement("div"), ib);

    The original div element should not be a match for the :nth-child() selector.