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
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.