Шпаргалка по CSS-селекторам
Базовые селекторы
.css3-class {
font-weight: bold;
}
| Селектор | Описание |
|---|---|
* | Все элементы |
div | Имя тега = "div" |
.class | Класс = "class" |
#id | ID = "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
