Типы CSS селекторов

Разберем на какие общие типы можно разделить все CSS селекторы.

Смотрите также:

Как браузер высчитывает значимость стилей - приоритеты и каскадность.
Все CSS селекторы
Функции CSS.

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

Такие селекторы указываются в HTML документе (их можно увидеть в исходном коде страницы). Поддержка браузерами - 98.75%.

* Универсальный селектор: Выбирает все элементы.
Синтаксис: * ns|* *|*
Пример: * будет соответствовать всем элементам на странице.
tag Селекторы по типу элемента (по тегу): Этот базовый селектор выбирает тип элементов.
Синтаксис: элемент
Пример: input выберет все элементы <input>.
.class Селекторы по классу: Этот базовый селектор выбирает элементы, основываясь на значении их атрибута class.
Синтаксис: .имяКласса
Пример: .index выберет все элементы <input class="index">.
#id Селекторы по id: Этот базовый селектор выбирает элементы, основываясь на значении их id атрибута. Идентификатор должен быть уникальным, т.е. используется только для одного элемента в HTML-документе.
Синтаксис: #имяИдентификатора
Пример: #index выберет элемент <input id="index">.
[attr] Селекторы по атрибуту: Этот селектор выбирает все элементы, имеющие данный атрибут или атрибут с определённым значением.
Синтаксис: [attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value].
Пример: [autoplay] выберет все элементы <input autoplay="index"> (независимо от его значения).

Селекторы Псевдо

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

Знак : позволяет выбрать элементы, основываясь на информации, которой нет в дереве элементов.

Псевдо-классы ссылок:
`a:link`	Все не посещенные ссылки.
`a:visited`	Все посещенные ссылки.
`a:active`	Все активные ссылки.
`a:hover`	Элемент над которым проходит указатель мыши.

Псевдо-классы на одном уровне:
`*:first-child`	Любой первый элемент в блоке.
`*:last-child`	Любой последний элемент в блоке.
`*:only-child`	Любой элемент в блоке, если там всего один элемент.
`*:nth-child(2)`	Любой второй элемент в блоке.
`*:nth-child(2n)`	Любые элементы в блоке по счету: 2, 4, 6, … (чётные).
`*:nth-child(even)`	Любые элементы в блоке по счету: 2, 4, 6, … (чётные).
`*:nth-child(2n+1)`	Любые элементы в блоке по счету: 1, 3, 5, … (нечётные).
`*:nth-child(odd)`	Любые элементы в блоке по счету: 1, 3, 5, … (нечётные).
`*:nth-child(3n+2)`	Элементы номер 2, 5, 8 и так далее.
`*:nth-last-child(2)`	Любой второй элемент в блоке с конца.

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

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

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

Псевдоклассы: наглядное пособие

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

Знак :: позволяет выбрать элементы, которых нет в HTML. Можно и с одинарного :.

Для различия, Псевдо-элементы принято помечать двойным двоеточием ::, а псевдо-классы одинарным :. Но это лишь рекомендация, на деле можно все помечать одинарным :.


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

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

Чтобы объединить несколько отдельных селекторов в один, скажем так, сложный селектор нужно использовать символы комбинаторы - это: , > ~ +.

, Комбинатор запятая: A, B — Это способ группировки, он выбирает все совпадающие узлы.
Комбинатор потомков (пробел): A B — Выбирает элементы, которые находятся внутри указанного элемента (вне зависимости от уровня вложенности).
> Комбинатор дочерних селекторов: A > B — В отличие от пробела выбирает только прямых потомков - это только дочерними элементы первого уровня.

~ Комбинатор всех следующих элементов

A ~ B — Выбирает все элементы, которые идут после указанного элемента и находятся на том же уровне вложенности (с тем же родителем).

+ Комбинатор первого следующего элемента

A + B — Выбирает элемент, который находится непосредственно после указанного элемента, если у них общий родитель.

Примеры комбинаторов
`div, span` \| Выберет оба элемента - и `<div>` и `<span>`.
`div span` \| Все `<span>` внутри `<div>`.
`div > span` \| Все `<span>`, у которых родитель `<div>`.
`div ~ p` \| Все элементы `<p>`, которые находятся сразу после `<div>`.
`div + p` \| Один элемент `<p>`, который находится сразу после `<div>`.
`.c1.c2` \| Элементы одновременно с двумя классами `c1` и `c2`.

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

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


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

Примеры комбинаторов
`div, span` \| Выберет оба элемента - и `<div>` и `<span>`.
`div span` \| Все `<span>` внутри `<div>`.
`div > span` \| Все `<span>`, у которых родитель `<div>`.
`div ~ p` \| Все элементы `<p>`, которые находятся сразу после `<div>`.
`div + p` \| Один элемент `<p>`, который находится сразу после `<div>`.
`.c1.c2` \| Элементы одновременно с двумя классами `c1` и `c2`.