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

1. div div:nth-of-type(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 correct type

2. div div:nth-of-type(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 correct type

3. div div:nth-of-type(1) {
   }
   
   <div>
      <blockquote></blockquote>
      <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 correct type

4. div div:nth-of-type(0n+1) {
   }
   
   <div>
      <blockquote></blockquote>
      <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 correct type

5. div div:nth-of-type(2) {
   }
   
   <div>
      <div></div>
      <blockquote></blockquote>
      <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 correct type

6. div div:nth-of-type(0n+2) {
   }
   
   <div>
      <div></div>
      <blockquote></blockquote>
      <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 correct type

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

   The CSS selector should match all marked elements, because every element of the correct type should match

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

   The CSS selector should match all marked elements, because every element of the correct type should match

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

   The CSS selector should match all marked elements, because every element of the correct type should match

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

    The CSS selector should match all marked elements, because every element of the correct type should match

11. div div:nth-of-type(n+2) {
    }
    
    <div>
       <blockquote></blockquote>
       <div></div>
       <blockquote></blockquote>
       <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 of the correct type starting from the second should match

12. div div:nth-of-type(1n+2) {
    }
    
    <div>
       <blockquote></blockquote>
       <div></div>
       <blockquote></blockquote>
       <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 of the correct type starting from the second should match

13. div div:nth-of-type(even) {
    }
    
    <div>
       <blockquote></blockquote>
       <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 of the correct type should match

14. div div:nth-of-type(odd) {
    }
    
    <div>
       <blockquote></blockquote>
       <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 of the correct type should match

15. div div:nth-of-type(2n) {
    }
    
    <div>
       <blockquote></blockquote>
       <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 of the correct type should match

16. div div:nth-of-type(2n-1) {
    }
    
    <div>
       <blockquote></blockquote>
       <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 of the correct type should match

17. div div:nth-of-type(2n+0) {
    }
    
    <div>
       <blockquote></blockquote>
       <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 of the correct type should match

18. div div:nth-of-type(2n+1) {
    }
    
    <div>
       <blockquote></blockquote>
       <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 of the correct type should match

19. div div:nth-of-type(2n+2) {
    }
    
    <div>
       <blockquote></blockquote>
       <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 of the correct type should match

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

    The CSS selector should match all marked elements, because every third element of the correct type should match

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

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

22. div div:nth-of-type(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 div:nth-of-type(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 div:nth-of-type(1) {
    }
    
    <div>
       <blockquote></blockquote>
       <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 of the correct type

25. div div:nth-of-type(0n+1) {
    }
    
    <div>
       <blockquote></blockquote>
       <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 of the correct type

26. div div:nth-of-type(2) {
    }
    
    <div>
       <div>Does this element match?</div>
       <blockquote></blockquote>
       <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 of the correct type

27. div div:nth-of-type(0n+2) {
    }
    
    <div>
       <div>Does this element match?</div>
       <blockquote></blockquote>
       <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 of the correct type

28. div div:nth-of-type(n+2) {
    }
    
    <div>
       <blockquote></blockquote>
       <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 of the correct type starting from the second should match

29. div div:nth-of-type(1n+2) {
    }
    
    <div>
       <blockquote></blockquote>
       <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 of the correct type starting from the second should match

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

38. div div:nth-of-type(-n+2) {
    }
    
    <div>
       <blockquote></blockquote>
       <div></div>
       <div></div>
       <blockquote></blockquote>
       <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 elements of the correct type should match

39. div div:nth-of-type(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 div:nth-of-type(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-of-type() selector.