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
//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
