Online and visually :nth css tester made by CSSTricks.
The provided source is a CSS-Tricks example of an nth-child tester, which allows users to experiment with the :nth-child
CSS selector.
Here are the main functionalities of the :nth-child
tester:
Interactive Testing: The tester allows users to interactively test different :nth-child
selectors.
Recipe Examples: The page includes example recipes, such as selecting every third element starting at the second, or selecting the second to last element, if it's a list item. Other recipes include selecting odd list items, every fifth list item starting at first, or all but the first six list items.
Visual Feedback: Although it does not work without JavaScript, the tester provides visual feedback by highlighting elements based on the specified :nth-child
selector.
Element Selection: The tester allows the selection of specific elements in a list by their position. It can also select specific HTML tags, such as divs.
Code Tree: The code tree is displayed to the right of the tester. The <div>
and <ins>
elements in the code tree do not show their closing tags for visual simplicity.
Improved Version: The page is noted as an improved second version, with credit to Francky Kleyneman.