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.