CSS Selectors Strategies Cheatsheet

What is CSS Selector?

CSS Selectors are patterns used to target HTML elements based on tag name, attributes, hierarchy, position, or state.
In UI automation, CSS selectors are preferred for their speed, readability, and native browser support.

🆔 CSS - ID Selector

Targets elements using a unique id attribute.

#loginButton

Example HTML

<button id="loginButton">Login</button>

When to use:

• ID is unique and stable
• Best-performing selector

🎨 CSS - Class Selector

Targets elements using a class name.

.submit-btn

Example HTML

<button class="submit-btn">Submit</button>

When to use:

• Reusable components
• Styling-aligned selectors

🏷️ CSS - Tag Selector

Targets elements by HTML tag.

input

When to use:

• Generic selections
• Combined with attributes

🔍 CSS - Attribute Equals Selector

input[type="password"]

Example HTML

<input type="password" />

When to use:

• Form inputs
• Stable attributes

📌 CSS - Attribute Contains (*=)

a[href*="login"]

Example HTML

<a href="/user/login">Login</a>

▶️ CSS - Attribute Starts With (^=)

input[id^="user_"]

⏹️ CSS - Attribute Ends With ($=)

img[src$=".png"]

🌳 CSS - Descendant Selector

Targets elements inside another element.

form input

When to use:

• Nested DOM structures
• Scoped selections

👶 CSS - Direct Child Selector (>)

ul > li

↔️ CSS - Adjacent Sibling Selector (+)

label + input

👥 CSS - General Sibling Selector (~)

label ~ input

🔀 CSS - Multiple Selectors (OR Condition)

button.primary, button.secondary

1️⃣ CSS - :first-child

li:first-child

🔚 CSS - :last-child

li:last-child

🔢 CSS - :nth-child()

tr:nth-child(2)

Note: Index starts from 1.

#️⃣ CSS - :nth-of-type()

div:nth-of-type(3)

⛔ CSS - :not() Selector

input:not([disabled])

When to use:

• Exclude disabled or hidden fields

✅ CSS - :checked Selector

input:checked

🗑️ CSS - :empty Selector

div:empty

🔗 CSS - Combined Attribute Strategy

input[type="text"][name="username"]

Why recommended:

• Highly stable
• Resistant to UI changes

⭐ CSS - Data Attribute Selector (BEST PRACTICE)

button[data-testid="login-btn"]

Why preferred:

• Automation-safe
• No visual impact
• Stable across releases

⚠️ CSS - Index Based Selection (Last Resort)

li:nth-child(3)

Avoid when:

• Dynamic lists
• Frequently changing UI

🚨 CSS - Common Automation Pitfalls

❌ Dynamic classes (hash-based)
❌ Deep DOM chaining
❌ Index-heavy selectors
❌ Styling-only hooks

📊 CSS - Recommended Locator Priority

1. id
2. data-* attributes
3. stable attributes
4. class names
5. hierarchy selectors
6. index-based selectors

⚖️ CSS vs XPath - Quick Comparison

Feature	CSS	XPath
Performance	Fast	Slower
Readability	High	Medium
DOM Traversal Upwards	❌ No	✅ Yes
Native Browser Support	✅ Yes	❌ Partial

🔧 CSS - Tool Compatibility

Supported by:

• Selenium WebDriver
• Playwright
• Cypress
• Puppeteer
• WebDriverIO