CSS Pseudo Class Tester

Interactive tool to demonstrate and test popular CSS pseudo-classes like :nth-child, :before, :after, and more.

Select Selector

Argument (e.g., 2n+1, odd, 3)

Try: 2n (even), 2n+1 (odd), 3 (3rd item), -n+3 (first 3)

Generated CSS

Live Preview (20 Items)

Items matching the selector are highlighted in blue.

Live Preview

Target Element

Hover or interact to see effects if applicable.

Features

Visual playground for CSS pseudo-classes and pseudo-elements.
Real-time preview of :nth-child, :nth-of-type, and more.
One-click copy of generated CSS code.
Specific demonstrations for pseudo-elements like ::before and ::after.
Interactive state testing for :hover, :active, etc.

How to Use

Select a pseudo-class or pseudo-element from the dropdown menu.
If applicable, enter an argument (e.g., 2n or odd) in the input field.
Observe the "Live Preview" area to see which elements are affected.
For structural classes, the grid items will highlight. For pseudo-elements, the central box will change.
Copy the generated CSS code for use in your project.