CSS Selector Tester

Common CSS selectors

• Basic: .class, #id, tag, *
• Combinators: A B descendant, A > B child, A + B adjacent, A ~ B general sibling
• Attribute: [attr], [attr=val], [attr^=val] starts-with, [attr$=val] ends-with, [attr*=val] contains
• Pseudo-classes: :hover, :focus, :first-child, :nth-child(2n+1), :not(.x), :has(span)
• Pseudo-elements: ::before, ::after, ::placeholder, ::selection

Tips

• Prefer class names over nth-child — more stable across DOM changes
• Avoid selector chains over 5 levels — slow and brittle
• Once it works, paste straight into document.querySelectorAll, Cypress or Puppeteer
• jQuery's $() selector accepts most of the same syntax