Типы 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.