Знание CSS-селекторов — основа верстки. Чем точнее вы умеете выбирать элементы, тем меньше лишних классов в HTML и чище код. Этот справочник охватывает все виды селекторов: от базовых до продвинутых псевдоклассов и атрибутных.
Базовые селекторы
| Селектор | Пример | Что выбирает |
|---|---|---|
| Тег | p |
Все элементы <p> |
| Класс | .btn |
Элементы с class=”btn” |
| ID | #header |
Элемент с id=”header” |
| Универсальный | * |
Все элементы |
Комбинаторы
|
1 2 3 4 5 6 7 8 9 10 11 |
/* Потомок (любой вложенный) */ div p { color: red; } /* Дочерний (непосредственный ребёнок) */ ul > li { list-style: none; } /* Смежный сосед (первый после) */ h2 + p { font-weight: bold; } /* Общие соседи (все после) */ h2 ~ p { color: gray; } |
Атрибутные селекторы
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
/* Элемент с атрибутом name */ [name] {} /* Точное совпадение значения */ [type="text"] {} /* Содержит слово (через пробел) */ [class~="active"] {} /* Начинается с */ [href^="https"] {} /* Заканчивается на */ [href$=".pdf"] {} /* Содержит подстроку */ [href*="example"] {} /* Префикс (равен или начинается с "value-") */ [lang|="ru"] {} |
Псевдоклассы структуры
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
/* Первый/последний дочерний */ li:first-child {} li:last-child {} /* N-й дочерний (2n = каждый чётный) */ tr:nth-child(2n) { background: #f5f5f5; } tr:nth-child(odd) { background: #fff; } /* Единственный дочерний */ p:only-child {} /* Не соответствует селектору */ li:not(.disabled) { cursor: pointer; } /* Первый дочерний данного типа */ p:first-of-type {} p:last-of-type {} |
Псевдоклассы состояния
|
1 2 3 4 5 6 7 8 9 10 11 |
a:link { color: blue; } /* непосещённая ссылка */ a:visited { color: purple; } /* посещённая */ a:hover { color: red; } /* при наведении */ a:active { color: orange; } /* при клике */ a:focus { outline: 2px solid blue; } /* при фокусе */ input:checked {} /* чекбокс/радио отмечен */ input:disabled {} /* поле отключено */ input:required {} /* обязательное поле */ input:valid {} /* прошло валидацию */ input:invalid {} /* не прошло валидацию */ |
Псевдоэлементы
|
1 2 3 4 5 6 7 8 9 10 11 12 |
/* Первая буква */ p::first-letter { font-size: 2em; } /* Первая строка */ p::first-line { font-weight: bold; } /* Контент до/после элемента */ .price::before { content: "От "; } .price::after { content: " руб."; } /* Выделение текста */ ::selection { background: #ffe066; } |
Псевдокласс :lang()
|
1 2 3 |
q:lang(ru) { quotes: "\00AB" "\00BB"; } /* «кавычки» для русского */ q:lang(en) { quotes: "\201C" "\201D"; } /* "quotes" for English */ q:lang(de) { quotes: "\201E" "\201C"; } /* „Anführungszeichen" für Deutsch */ |
Специфичность (Specificity)
Когда несколько правил применяются к одному элементу, побеждает то, у которого выше специфичность:
| Тип | Вес |
|---|---|
Инлайн стиль style="..." |
1-0-0-0 |
ID #id |
0-1-0-0 |
| Класс, атрибут, псевдокласс | 0-0-1-0 |
| Тег, псевдоэлемент | 0-0-0-1 |
Практические советы
- Избегайте чрезмерно длинных цепочек —
.nav ul li a spanхрупко и медленно - Предпочитайте классы тегам — переиспользуемее и быстрее
:not()теперь принимает список::not(h1, h2, h3)— поддерживается в Chrome 88+- Используйте
:is()для сокращения::is(h1, h2, h3) aвместо трёх правил