# CSS Селекторы — Полная шпаргалка

## Быстрый справочник

### Базовые селекторы

| Селектор | Пример | Описание |
|----------|--------|----------|
| `*` | `*` | Все элементы |
| `element` | `div` | Элемент по тегу |
| `#id` | `#main` | Элемент по ID |
| `.class` | `.button` | Элемент по классу |
| `[attr]` | `[disabled]` | Элемент с атрибутом |
| `[attr=value]` | `[type="submit"]` | Точное совпадение атрибута |
| `[attr^=value]` | `[href^="https"]` | Атрибут начинается с |
| `[attr$=value]` | `[href$=".pdf"]` | Атрибут заканчивается на |
| `[attr*=value]` | `[name*="user"]` | Атрибут содержит |

### Комбинаторы

| Селектор | Пример | Описание |
|----------|--------|----------|
| `A B` | `div p` | Потомок (любой уровень) |
| `A > B` | `div > p` | Прямой потомок |
| `A + B` | `h1 + p` | Соседний элемент |
| `A ~ B` | `h1 ~ p` | Все следующие соседние |

### Псевдоклассы

| Псевдокласс | Пример | Описание |
|-------------|--------|----------|
| `:first-child` | `li:first-child` | Первый дочерний |
| `:last-child` | `li:last-child` | Последний дочерний |
| `:nth-child(n)` | `tr:nth-child(2)` | n-й дочерний |
| `:nth-of-type(n)` | `p:nth-of-type(2)` | n-й элемент типа |
| `:not(selector)` | `div:not(.hidden)` | Исключение |
| `:has(selector)` | `div:has(p)` | Содержит дочерний элемент |
| `:contains(text)` | `a:contains("Click")` | Содержит текст |

## XPath — Альтернатива

### Базовые XPath

```xpath
//element                      # Все элементы
//div[@id='main']              # По атрибуту
//div[contains(@class, 'btn')] # Частичное совпадение класса
//button[text()='Submit']      # По тексту
//a[contains(text(), 'Learn')] # Частичное совпадение текста
//div[@id='main']//p           # Вложенность
//div[1]                       # Первый div
//div[last()]                  # Последний div