CSS Selector Playground
Practice CSS selectors the way you'll use them in Selenium and Playwright. Type a selector and every matching element lights up instantly, with ready-to-use locator code. Solve the challenges, then use the cheat sheet below as a reference.
CSS selector cheat sheet
Every example below works in the playground above. In both Selenium
(By.cssSelector) and Playwright (page.locator), these are
the same selectors you'd use in a stylesheet.
| Selector | What it selects |
|---|---|
#nl-email | The element with that id. |
.price | Every element with that class. |
.nav-link.active | Elements with both classes (no space between them). |
[data-sku='B200'] | Exact attribute value. |
[data-testid^='add-'] | Attribute starts with ($= ends with, *= contains). |
nav a | Descendants: every a anywhere inside nav. |
.info > .price | Direct children only. |
h2 + .price | The element immediately after an h2. |
h2 ~ span | Any later sibling of an h2. |
.product:nth-child(2) | The second child of its parent (if it's a .product). |
li:first-child, li:last-child | First / last child. |
.product:not(.sale) | Exclude matches. |
button:disabled, input:checked | Elements in a particular state. |
li:has(.out-of-stock) | Elements that contain a match — the closest CSS gets to walking up. |
What CSS can't do
CSS can't match on visible text, and apart from :has() it can't move
up the tree. For "the row whose cell says #1002", use the
XPath Playground, or Playwright's
getByText and filter({ hasText }) in the
Playwright Locator Playground.