Grow your CSS skills. Land your dream job.

Updated :nth Tester

Published by Chris Coyier

Just a quick post to note that I've updated the :nth Tester page to hopefully be a bit more useful than it was before. The purpose of the page is to learn in an interactive way how the selectors :nth-child, :nth-of-type, :nth-last-child, and :nth-last-of-type work.

In this update, I:

  • Made it actually inject CSS (with this) rather than simulate the selection with jQuery. This means if there happens to be a bug or something with the real CSS implementation this would accurately show that.
  • There are some nested lists and other nested elements, so you can see how selection behaves in more complex ways.
  • There are more choices. You can select more than just :nth-child now, as well as target different elements.
  • There are clickable "recipes" (loosely based on this post) so you can quickly see some examples of interesting selections you can do with :nth stuff.

Credit to Lea Verou who has had a nicer one than me forever. I just wanted to take a crack at my own and get it up to date.

tester
Go play.

Comments

  1. Chris, The link is not working. What gives?

  2. Permalink to comment#

    VERY useful demo! I sometimes get headaches trying to figure it out :P

    Your demo pages are giving me a horizontal scrollbar, apparently it’s #demo-top-bar‘s fault :P (Chrome 22.0.1229.94, Win7)

  3. Permalink to comment#

    Hands down, Chris’ :nth example page is one of the most helpful CSS pages on the web.

    It’s gotta be the bookmark I use the most from my list.

    Thanks a million for this man.

  4. This kind of thing is incredibly helpful. :nth is one of those CSS techniques that can be a bit foreign if you don’t know it well. Thanks for sharing!

  5. Permalink to comment#

    Year ago I made similar tester http://www.w3systems.pl/demo/pseudoclasses.html

  6. Carlos
    Permalink to comment#

    @ksh Your tester is also really good :) well done.

  7. Nojan A.
    Permalink to comment#

    Superb! thank you so much for sharing it.

  8. Ryan
    Permalink to comment#

    “Recipes” not “Recipies”

    Unless I’m missing a joke or something…

  9. Permalink to comment#

    Thanks, very useful demo.

  10. Cheers Chris,
    a live example such as this demonstrates more about nth-child shenanigans than a page of copy would. I’ll definitely be using this resource!

  11. thnx chris i bookmarked :D

  12. Permalink to comment#

    Very useful. An extra tool to put in my developer tool-box.
    Thank you for making our life easier.

  13. Permalink to comment#

    That is awesome. Great Work Chris! Small request – it would be nice if you can throw in the reset button to clear the selection/s. I know user can enter ’0′ in the parenthesis to achieve the same, but button would make it much easier.

  14. Thank you for this one! I’m really lost when it comes to the nth-* stuff!

    Every time I use nth-* I think: Oh yes, I get how this works. But this is never true :D

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".