СПРАВОЧНИК
CSS-селекторы
Селекторы, псевдоклассы и псевдоэлементы
Алфавитно-тематический справочник CSS-селекторов: универсальный селектор, селекторы по тегу, классу и id, комбинаторы, селекторы по атрибутам, псевдоклассы и псевдоэлементы. У каждой записи есть короткое описание и рабочий пример кода. Отдельно разобрана специфичность — правило, по которому браузер решает, какой стиль победит.
Атрибуты 5
Селектор по вхождению [attr*=]
[class*="col-"] { ... }Выбирает элементы, где подстрока встречается в значении атрибута.Селектор по концу значения [attr$=]
[href$=".pdf"] { ... }Выбирает элементы, чьё значение атрибута заканчивается подстрокой.Селектор по наличию атрибута [attr]
[disabled] { ... }Выбирает элементы, у которых есть указанный атрибут.Селектор по началу значения [attr^=]
[href^="https"] { ... }Выбирает элементы, чьё значение атрибута начинается с подстроки.Селектор по точному значению [attr=value]
[type="checkbox"] { ... }Выбирает элементы с точным значением атрибута.Базовые 6
Группировка селекторов (a, b)
h1, h2, h3 { ... }Применяет один блок стилей к нескольким селекторам.Селектор по id (#id)
#header { ... }Выбирает единственный элемент с указанным id.Селектор по классу (.class)
.btn { ... }Выбирает элементы с указанным классом.Селектор по тегу
p { ... }Выбирает все элементы указанного типа (тега).Специфичность (specificity)
(inline, id, class, type)Правило, по которому браузер выбирает победивший стиль.Универсальный селектор (*)
* { ... }Совпадает с любым элементом на странице.Комбинаторы 4
Дочерний комбинатор (A > B)
ul > li { ... }Выбирает только прямых потомков B элемента A.Комбинатор потомка (A B)
nav a { ... }Выбирает элементы B внутри A на любой глубине.Последующий комбинатор (A ~ B)
h2 ~ p { ... }Выбирает все элементы B после A на одном уровне.Соседний комбинатор (A + B)
h2 + p { ... }Выбирает элемент B, идущий сразу после A.Псевдоклассы 18
:active
button:active { ... }Стили в момент нажатия на элемент.:checked
input:checked { ... }Выбирает отмеченные чекбоксы, радиокнопки и опции.:disabled
input:disabled { ... }Выбирает заблокированные элементы форм.:empty
p:empty { ... }Выбирает элементы без содержимого.:first-child
li:first-child { ... }Выбирает первый дочерний элемент родителя.:focus
input:focus { ... }Стили для элемента в фокусе.:has()
article:has(img) { ... }Выбирает элемент, содержащий подходящего потомка («родительский селектор»).:hover
a:hover { ... }Стили при наведении курсора на элемент.:is()
:is(h1, h2) a { ... }Объединяет несколько селекторов в один компактный.:last-child
li:last-child { ... }Выбирает последний дочерний элемент родителя.:not()
:not(.active) { ... }Выбирает элементы, не совпадающие с переданным селектором.:nth-child
li:nth-child(2n) { ... }Выбирает дочерние элементы по формуле или номеру.:nth-of-type
p:nth-of-type(2) { ... }Выбирает элементы по номеру среди соседей того же типа.:required
input:required { ... }Выбирает обязательные для заполнения поля.:root
:root { ... }Корневой элемент документа, обычно html.:target
:target { ... }Выбирает элемент, на который указывает якорь в URL.:visited
a:visited { ... }Стили для уже посещённых ссылок.:where()
:where(h1, h2) a { ... }Как :is(), но с нулевой специфичностью.Псевдоэлементы 7
::after
.clearfix::after { ... }Вставляет сгенерированный контент после содержимого элемента.::before
.icon::before { ... }Вставляет сгенерированный контент перед содержимым элемента.::first-letter
p::first-letter { ... }Стилизует первую букву блочного текста.::first-line
p::first-line { ... }Стилизует первую строку блочного текста.::marker
li::marker { ... }Стилизует маркер или номер пункта списка.::placeholder
input::placeholder { ... }Стилизует текст-подсказку в полях ввода.::selection
::selection { ... }Стилизует выделенный пользователем текст.