Все распространённые селекторы CSS, сгруппированные по семействам: базовые, комбинаторы, псевдоклассы, псевдоэлементы и селекторы атрибутов. Каждая строка сочетает селектор с однострочным примером.
Селектор выбирает элементы, к которым применяется правило. Специфичность решает, какое правило победит при нескольких совпадениях: inline побеждает id, id побеждает класс, класс побеждает тип. Читайте селекторы справа налево: браузер сначала сопоставляет крайнюю правую часть, затем поднимается по комбинаторам. Семейства ниже покрывают почти всё, что вы будете писать.
Справочная таблица · 53 записи
Селекторы CSSExplained
53 of 53 rows
Базовые
Каждый элемент с таким тегом.
button { }
Элементы с этим классом.
.active { }
Единственный элемент с этим id.
#header { }
Все элементы.
* { box-sizing: border-box; }
Корень документа; обычное место для глобальных пользовательских свойств.
:root { --gap: 1rem; }
Элементы, сопоставленные A или B (группировка).
h1, h2, h3 { }
Комбинаторы
Любой B, потомок A.
nav a { }
B — прямой потомок A.
ul > li { }
B сразу после A, общий родитель.
h1 + p { }
Каждый B после A, общий родитель.
h1 ~ p { }
Псевдоклассы (состояние)
Элемент, пока указатель над ним.
a:hover { }
Элемент, находящийся в фокусе клавиатуры.
input:focus { }
Элемент, являющийся первым потомком своего родителя.
li:first-child { }
n-й потомок; принимает формулы вида 2n.
tr:nth-child(2n) { }
Элементы, не соответствующие ни одному внутреннему селектору; принимает список начиная с Selectors 4.
li:not(:first-child, .skip) { }
Отмеченный флажок, переключатель или опция.
input:checked { }
Отключённое поле или кнопка.
button:disabled { }
Родитель, содержащий совпадение с внутренним селектором.
li:has(ul) { }
Любой селектор из списка; специфичность — наивысшая в списке.
:is(ol, ul) li { }
То же, что :is(), но со специфичностью ноль.
:where(ol, ul) li { }
Фокус, которому нужен видимый ободок, обычно с клавиатуры.
a:focus-visible { }
Элемент, сам находящийся в фокусе или имеющий в фокусе потомка.
form:focus-within { }
Элемент, являющийся последним потомком своего родителя.
li:last-child { }
Элемент, у которого нет соседних элементов.
p:only-child { }
n-й соседний элемент с тем же тегом; принимает формулы вида 2n.
p:nth-of-type(2n) { }
Первый или последний соседний элемент с тем же тегом.
p:first-of-type { }
Элемент без потомков и без текста.
td:empty { }
Непосещённые и уже посещённые ссылки.
a:visited { }
Поля, отмеченные как обязательные, и поля, оставшиеся необязательными.
input:required { }
Поля, значение которых проходит или не проходит правила валидации.
input:invalid { }
Поле, которое пользователь не может изменить.
input:read-only { }
Элемент, чей id совпадает с фрагментом URL.
#note:target { }
Предвыбранная опция или кнопка по умолчанию в группе.
input:default { }
Флажок, переведённый скриптом в неопределённое состояние.
input:indeterminate { }
Любой встроенный элемент или пользовательский элемент после регистрации.
my-widget:defined { }
Элемент на указанном языке.
p:lang(fr) { }
Псевдоэлементы
Сгенерированный узел содержимого перед элементом.
label::before { content: ""; }
Сгенерированный узел содержимого после элемента.
code::after { content: ";"; }
Первая буква текстового блока.
p::first-letter { }
Замещающий текст поля.
input::placeholder { }
Первая строка текстового блока.
p::first-line { }
Текст, выделенный пользователем.
::selection { }
Маркер или номер элемента списка.
li::marker { }
Область позади полноэкранного элемента или диалога.
dialog::backdrop { }
Кнопка обзора внутри поля выбора файла.
input::file-selector-button { }
Часть shadow DOM, открытая хостом.
my-widget::part(header) { }
Селекторы атрибутов
Элементы, у которых есть атрибут, с любым значением.