Pagetual

Шпаргалка по CSS-селекторам

Базовые селекторы

.css3-class {
  font-weight: bold;
}
СелекторОписание
*Все элементы
divИмя тега = "div"
.classКласс = "class"
#idID = "id"
[disabled]Имеет атрибут "disabled"
[role="dialog"]Атрибут role = "dialog"

Комбинаторы

СелекторОписание
.parent .childПотомок
.parent > .childНепосредственный потомок
.child + .siblingСоседний элемент
.child ~ .siblingДальний соседний элемент
.class1.class2Имеет оба класса
.class1,.class2.class1 или .class2

Селекторы атрибутов

СелекторОписание
[role="dialog"]= Точное совпадение, role = "dialog"
[class~="box"]~= Содержит слово, класс содержит слово "box"
[class|="box"]|= Точное совпадение или префикс (например, value-)
[href$=".doc"]$= Заканчивается на, href заканчивается на ".doc"
[href^="/index"]^= Начинается с, href начинается с "/index"
[class*="-is-"]*= Содержит, класс содержит строку "-is-"

Псевдоклассы

СелекторОписание
:targetПредставляет уникальный элемент (целевой элемент) с id, соответствующим фрагменту URL. Например, h2#foo:target
:focusФокусированный элемент
:activeАктивный элемент
:nth-child(3)3-й дочерний элемент.
:nth-child(3n+2)2-й дочерний элемент в группах по 3. Используется формула (an + b). Описание: a представляет размер цикла, n — счетчик (начинается с 0), а b — значение смещения.
:nth-child(-n+4)4, 3, 2, 1 — меньше 5.
:nth-last-child(2)Элементы на основе их позиции среди группы одноуровневых элементов, считая с конца.
:nth-of-type(2)Элементы на основе их позиции среди одноуровневых элементов того же типа (имени тега).
:checkedОтмеченные поля ввода
:disabledОтключенные элементы
:enabledВключенные элементы
:defaultЭлемент по умолчанию в группе
:emptyЭлементы без дочерних элементов

Вариации псевдоклассов

СелекторОписание
:first-of-typeПредставляет первый элемент своего типа среди группы одноуровневых элементов.
:last-of-typeПредставляет последний элемент своего типа среди группы одноуровневых элементов.
:only-of-typeПредставляет элемент, у которого нет одноуровневых элементов того же типа.
:first-childПредставляет первый элемент среди группы одноуровневых элементов.
:last-childПредставляет последний элемент среди группы одноуровневых элементов.
:only-childПредставляет элемент без каких-либо одноуровневых элементов. Это то же самое, что :first-child:last-child или :nth-child(1):nth-last-child(1), но с более низкой специфичностью.
::first-letterПрименяет стили к первой букве первой строки блочного контейнера, но только если ей не предшествует другое содержимое (например, изображения или встроенные таблицы).
::first-lineПрименяет стили к первой строке блочного контейнера.

Проверьте свои навыки CSS-селекторов с Pagetual

Picker