Усі поширені селектори 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) { }
Відмічений checkbox, radio або option.
input:checked { }
Вимкнений input або кнопка.
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 { }
Checkbox, установлений скриптом у невизначений стан.
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) { }
Селектори атрибутів
Елементи, що мають атрибут, з будь-яким значенням.
[required] { }
Атрибут точно дорівнює val.
[type="submit"] { }
Атрибут починається з val.
a[href^="https"] { }
Атрибут закінчується на val.
a[href$=".pdf"] { }
Атрибут містить val.
a[href*="login"] { }
Розділений пробілами список, що містить val.
[class~="badge"] { }
Значення дорівнює val або починається з val плюс дефіс.