QAing reference · Aug 2026
CSS Selectors Cheat Sheet
CSS selectors find elements by their HTML structure and attributes. They are useful for browser investigation and automation when user-facing locators are not available.
| Selector | Matches |
|---|
button | Every button element. |
.error | Elements with class error. |
#checkout | Element with ID checkout. |
button.primary | Buttons with class primary. |
.card, .panel | Either selector. |
* | Every element. Use carefully. |
[data-testid="save"] | Exact value. |
[disabled] | Attribute is present. |
[href^="https://"] | Value starts with text. |
[href$=".pdf"] | Value ends with text. |
[class*="warning"] | Value contains text. |
[class~="active"] | Space-separated value contains the word. |
[lang|="en"] | en or value starting en-. |
form input | Any input inside a form. |
form > input | Input that is a direct child. |
label + input | Input immediately after a label. |
h2 ~ p | Paragraph siblings after an h2. |
li:first-child | First item among siblings. |
li:last-child | Last item among siblings. |
tr:nth-child(2) | Second row. |
input:checked | Checked checkbox or radio. |
button:disabled | Disabled button. |
input:not([type="hidden"]) | Inputs except hidden ones. |
form:has(.error) | Form containing an error element. |
// First match
document.querySelector('[data-testid="save"]')
// All matches and count
document.querySelectorAll('form input').length
// Highlight every match
document.querySelectorAll('a[href$=".pdf"]')
.forEach(el => el.style.outline = '2px solid red');
- Confirm the selector matches the intended element.
- Check it is unique when the test expects one element.
- Test with repeated rows, translations and dynamic data.
- Avoid generated classes, positional selectors and long DOM chains.
- Prefer Playwright role or label locators for user-facing controls.