This content originally appeared on Lea Verou’s blog and was authored by Lea Verou
I was doing some research today about how people explain the CSS3 structural* pseudo classes and I stumbled upon this demo by CSS tricks: http://css-tricks.com/examples/nth-child-tester/
I thought the idea is awesome, but lacks a few features:
- It doesn’t use the native browser algorithm for selecting the elements. Granted, it’s not that tough to code your own properly, but I trust a browser implementation more (IE doesn’t support these altogether, so it’s out of the question anyway).
- Doesn’t allow you to test for nth-last-child, nth-of-type, nth-last-of-type (and especially the last two are a lot harder to understand for most people)
- Doesn’t allow you to add/remove list items to see the effects of the selector with different numbers of elements (especially needed if nth-last-child, nth-of-type, nth-last-of-type were involved)
So, I decided to code my own. It allows you to test for all 4 nth-something selectors, supports adding/removing elements (the selected elements update instantly) and uses the native browser implementation to select them (so it won’t work on IE and old browsers).
Enjoy: CSS3 structural pseudo-class selector tester :)
*Yes, :root and :empty also belong to those, but are rarely used. All other structural pseudoclasses are actually shortcuts to some particular case of the aforementioned 4 :)
This content originally appeared on Lea Verou’s blog and was authored by Lea Verou
Lea Verou | Sciencx (2010-03-14T00:00:00+00:00) CSS3 structural pseudo-class selector tester. Retrieved from https://www.scien.cx/2010/03/14/css3-structural-pseudo-class-selector-tester/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.