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.
Chris, The link is not working. What gives?
It’s working fine for me…
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)
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.
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!
Year ago I made similar tester http://www.w3systems.pl/demo/pseudoclasses.html
@ksh Your tester is also really good :) well done.
thanks @Carlos
Superb! thank you so much for sharing it.
“Recipes” not “Recipies”
Unless I’m missing a joke or something…
Nope I’m just a bad speller.
Thanks, very useful demo.
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!
thnx chris i bookmarked :D
Very useful. An extra tool to put in my developer tool-box.
Thank you for making our life easier.
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.
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