CSS селекторы

Автор
Анатолий Ахматов
На чтение
0:21 мин
Обновлено
06.08.2021
Приветствую. Сегодня мы разберем все 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) |
| |||||||||||||
: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>. |