CSS селекторы


Приветствую. Сегодня мы разберем все css селекторы. Ниже подробные таблицы с детальным описанием каждого селектора.


Явные селекторы

Эти селекторы указываются в HTML документе, можно посмотреть исходный код и увидеть нужный селектор.

Селектор Пример Описание
* * Все элементы, кроме псевдо-элементов.
.class .classname Элемент с class="classname".
#id #container Элемент с id="container".
HTML тег div Элемент <div>.
[атрибут] [name] Элементы с атрибутом name.
[атрибут = значение] [name=admin] Элементы с атрибутом  name="admin".
[атрибут ~= значение] [name~=admin] Элементы с атрибутом name, в значение которого есть admin
[атрибут ^= значение] [src^="http"] Элементы с атрибутом src, значение которого начинается с http.
[атрибут $= значение] [src$=".jpg"] Элементы с атрибутом src, значение которого заканчивается на .jpg.
[атрибут *= значение] [src*="http"] Элементы с атрибутом src, в значении которого присутствует 'http'.

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

Начинаются с двоеточия, не указываются в разметке документа.

Псевдо-класс Пример Описание
:hover a:hover Выбор ссылки при наведении курсора мышки. Вместо '<a>' может быть любой элемент.
:active a:active Выбор активной ссылки.
:link a:link Выбор всех не посещенных ссылок.
:visited a:visited Выбор всех посещенных ссылок.

По расположению на одном уровне
:first-child div:first-child Выбор первого дочернего элемента <div>, если у родителя первый элемент именно <div>.
:last-child div:last-child Выбор последнего дочернего элемента <div>, если у родителя последний элемент именно <div>.
:only-child div:only-child Выбор дочернего элемента <div>, если у родителя  всего один элемент и это <div>.
:nth-child(n)
div:nth-child(2) Выбор второго дочернего элемента <div>, если второй элемент родителя <div>.
div:nth-child(2n) Четные элементы.
div:nth-child(even) Четные элементы.
div:nth-child(2n+1) Нечетные элементы.
div:nth-child(odd) Нечетные элементы.
div:nth-child(3n+2) Элементы номер 2, 5, 8 ...
:nth-last-child(n) div:nth-last-child(2) Выбор второго дочернего элемента <div> с конца, если второй элемент родителя равен <div>.

По расположению на одном уровне с тем же тегом
:first-of-type div:first-of-type Выбор первого дочернего элемента <div>.
:last-of-type div:last-of-type Выбор последнего дочернего элемента <div>.
:only-of-type div:only-of-type Выбор дочернего элемента <div>, если у родителя элемент <div> всего один.
:nth-of-type(n) div:nth-of-type(2) Выбор второго дочернего элемента <div>.
:nth-last-of-type(n) div:nth-last-of-type(2) Выбор второго дочернего элемента <div> с конца.

Поля форм
:enabled input:enabled Выбор включенного <input>.
:disabled input:disabled Выбор выключенного <input>.
:focus input:focus Выбор <input>, который находится в фокусе.
:checked input:checked Выбранный элемент <input> типа radio или checkbox.

Остальные
:root :root Выбор корневого элемента в документе.
:empty div:empty Пустой элемент <div>, в котором нет ни текста ни элементов.
:lang(язык) div:lang(en) Выбор элемента <div> с атрибутом lang, значение которого начинается с "en".
:target :target Выбор активного элемента на странице, который имеет якорную ссылку.
:not(селектор) :not(div) Выбор всех элементов, кроме <div>.

Псевдо-элементы

Элементы, которых не существуют в HTML документе. Можно сказать особая выборка.

Псевдо-элемент Пример Описание
::first-letter div::first-letter Выбирает первую букву элемента <div>.
::first-line div::first-line Выбирает первую строку элемента <div>.
::before div::before Вставляет указанное в content:" " содержимое в начало <div>.
::after div::after Вставляет указанное в content:" " содержимое в конец <div>.
::selection div::selection Оформит выделенный (мышкой) текст внутри <div>.

Объединение селекторов

Используются символы комбинаторы: , >, +, ~, ,. Они устанавливают связь между селекторами.

Комбинатор Пример Описание
правило, правило div a, span i Элемент <a> внутри <div> и элемент <i> внутри <span>.
селекторСелектор .quote.active Элементы одновременно с двумя классами quote и active.
селектор селектор div span Элемент <span> внутри <div>.
селектор > селектор div > span Элементы <span>, у которых родитель <div>.
селектор + селектор div + p Один элемент <p>, который находится сразу после <div>.
селектор ~ селектор div ~ p Все элементы <p>, которые находятся сразу после <div>.