# curl https://devtools.krishanchawla.com/raw/complete-css-selectors-strategies-cheatsheet.txt

CSS SELECTORS STRATEGIES CHEATSHEET
Production-ready CSS selectors cheatsheet for UI automation with basic to advanced strategies and real-world examples.

Category: Automation · Type: cheatsheet
Official docs: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors

────────────────────────────────────────────────────────────

## 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**.

**⚡ Key Features**
- Native browser execution (faster than XPath)
- Clean and readable syntax
- Strong attribute-based matching
- Widely supported across tools

**🎯 Use Cases**
- Selenium WebDriver locators
- Playwright & Cypress automation
- Stable regression test suites
- Frontend validation & UI checks

## 🆔 CSS - ID Selector

Targets elements using a unique `id` attribute.

```css
#loginButton
```

**Example HTML**
```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.

```css
.submit-btn
```

**Example HTML**
```html
<button class="submit-btn">Submit</button>
```

**When to use:**
- Reusable components
- Styling-aligned selectors

## 🏷️ CSS - Tag Selector

Targets elements by HTML tag.

```css
input
```

**When to use:**
- Generic selections
- Combined with attributes

## 🔍 CSS - Attribute Equals Selector

```css
input[type="password"]
```

**Example HTML**
```html
<input type="password" />
```

**When to use:**
- Form inputs
- Stable attributes

## 📌 CSS - Attribute Contains (*=)

```css
a[href*="login"]
```

**Example HTML**
```html
<a href="/user/login">Login</a>
```

## ▶️ CSS - Attribute Starts With (^=)

```css
input[id^="user_"]
```

## ⏹️ CSS - Attribute Ends With ($=)

```css
img[src$=".png"]
```

## 🌳 CSS - Descendant Selector

Targets elements inside another element.

```css
form input
```

**When to use:**
- Nested DOM structures
- Scoped selections

## 👶 CSS - Direct Child Selector (>)

```css
ul > li
```

## ↔️ CSS - Adjacent Sibling Selector (+)

```css
label + input
```

## 👥 CSS - General Sibling Selector (~)

```css
label ~ input
```

## 🔀 CSS - Multiple Selectors (OR Condition)

```css
button.primary, button.secondary
```

## 1️⃣ CSS - :first-child

```css
li:first-child
```

## 🔚 CSS - :last-child

```css
li:last-child
```

## 🔢 CSS - :nth-child()

```css
tr:nth-child(2)
```

**Note:** Index starts from 1.

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

```css
div:nth-of-type(3)
```

## ⛔ CSS - :not() Selector

```css
input:not([disabled])
```

**When to use:**
- Exclude disabled or hidden fields

## ✅ CSS - :checked Selector

```css
input:checked
```

## 🗑️ CSS - :empty Selector

```css
div:empty
```

## 🔗 CSS - Combined Attribute Strategy

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

**Why recommended:**
- Highly stable
- Resistant to UI changes

## ⭐ CSS - Data Attribute Selector (BEST PRACTICE)

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

**Why preferred:**
- Automation-safe
- No visual impact
- Stable across releases

## ⚠️ CSS - Index Based Selection (Last Resort)

```css
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

────────────────────────────────────────────────────────────

Full page: https://devtools.krishanchawla.com/devtools/complete-css-selectors-strategies-cheatsheet
More tools: https://devtools.krishanchawla.com