CSS nth-child playground

Interactive playground to visualize and test :nth-child pseudo-class selectors.
:nth-child( )
Try: 2n, 2n+1, 3n, -n+3, odd, even
10 50

Matches elements.

Invalid pattern

Features

  • Interactive visualizer for :nth-child pseudo-class.
  • Support for an+b standard syntax.
  • Dynamic element count adjustment.
  • Real-time matching feedback.
  • Copy-ready CSS code snippet.

How to Use

  1. Enter a pattern inside the :nth-child() input (e.g., "2n+1").
  2. Adjust the number of elements using the slider.
  3. Observe which items are highlighted in the grid.
  4. Copy the generated CSS selector for your style sheets.