postcss-nth-nested

A PostCSS playground for transforming :nth-nested(...) into CSS selectors that target exact nesting depths and An+B depth patterns.

PostCSS 8 Depth 1-99 An+B syntax Build-time transform

Source CSS

Edit the selector or choose an example.

Generated CSS

Loading plugin

Live preview

The generated CSS is injected into this nested markup.

container1: depth classes

  • Depth 1
    • Depth 2
      • Depth 3
        • Depth 4
          • Depth 5
            • Depth 6

container2: repeated item class

  • Depth 1
    • Depth 2
      • Depth 3
        • Depth 4
          • Depth 5
            • Depth 6