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

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

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

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

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

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

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

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

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

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

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

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

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

7. div :nth-last-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-last-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-last-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-last-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-last-child(n+2) {
    }
    
    <div>
       <div>Does this element match?</div>
       <div>Does this element match?</div>
       <div>Does this element match?</div>
       <div></div>
    </div>

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

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

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

13. div :nth-last-child(even) {
    }
    
    <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 even element counting from the bottom should match

14. div :nth-last-child(odd) {
    }
    
    <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 odd element counting from the bottom should match

15. div :nth-last-child(2n) {
    }
    
    <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 even element counting from the bottom should match

16. div :nth-last-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 match all marked elements, because every odd element counting from the bottom should match

17. div :nth-last-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 match all marked elements, because every even element counting from the bottom should match

18. div :nth-last-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 match all marked elements, because every odd element counting from the bottom should match

19. div :nth-last-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 match all marked elements, because every even element counting from the bottom should match

20. div :nth-last-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 counting from the first from bottom

21. div :nth-last-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 match all marked elements, because the last two elements should match

22. div :nth-last-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-last-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-last-child(1) {
    }
    
    <div>
       <div>Does this element match?</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 it should only match the last element

25. div :nth-last-child(0n+1) {
    }
    
    <div>
       <div>Does this element match?</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 it should only match the last element

26. div :nth-last-child(2) {
    }
    
    <div>
       <div>Does this element match?</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 it should only match the second element from the bottom

27. div :nth-last-child(0n+2) {
    }
    
    <div>
       <div>Does this element match?</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 it should only match the second element from the bottom

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

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

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

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

30. div :nth-last-child(even) {
    }
    
    <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 even element counting from the bottom should match

31. div :nth-last-child(odd) {
    }
    
    <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 odd element counting from the bottom should match

32. div :nth-last-child(2n) {
    }
    
    <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 even element counting from the bottom should match

33. div :nth-last-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 not match the marked elements, because every odd element counting from the bottom should match

34. div :nth-last-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 not match the marked elements, because every even element counting from the bottom should match

35. div :nth-last-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 not match the marked elements, because every odd element counting from the bottom should match

36. div :nth-last-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 not match the marked elements, because every even element counting from the bottom should match

37. div :nth-last-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 counting from the first of the bottom should match

38. div :nth-last-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 not match the marked elements, because only the last two should match

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

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

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

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