Updated :nth Tester

Avatar of Chris Coyier
Chris Coyier on (Updated on )

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.

Go play.