Селекторы CSS

130
посл. ред. 30.12.2016

Селектор определяет элемент документа, к которому применяется стиль. В качестве селектора может выступать простой селектор или целая цепочка простых селекторов, разделенных комбинаторами.

Простые селекторы

В таблице приводятся описания простых селекторов с пояснениями и примерами.

Селектор Элемент страницы
tag Все элементы <tag> в документе (типовой селектор).
* Универсальный селектор для выбора всех элементов страницы.
tag.classname Элементы <tag>, у которых атрибут class имеет значение из нескольких слов и одно из них classname.
tag#idname Элемент <tag>, чей атрибут id имеет значение idname.
tag[attr] Элементы <tag> с атрибутом attr.
tag[attr="val"] Элементы <tag>, у которых атрибут attr имеет значение val.
tag[attr~="val"] Элементы <tag>, у которых атрибут attr имеет значение из нескольких слов и одно из них val.
tag[attr^="val"] Элементы <tag>, у которых атрибут attr начинается со строки val.
tag[attr$="val"] Элементы <tag>, у которых атрибут attr заканчивается строкой val.
tag[attr*="val"] Элементы <tag>, у которых атрибут attr содержит подстроку val.
tag[attr|="val"] Элементы <tag>, у которых атрибут attr имеет значение из нескольких слов, разделенных дефисом, и первое из них val.
tag:pseudo-class Элементы <tag>, которые соответствуют псевдоклассу :pseudo-class.
tag::pseudo-element Соответствующие псевдоэлементы.

В простом селекторе нельзя использовать пробелы, так как пробел является комбинатором. Любой простой селектор должен начинаться с универсального или типового селектора. При использовании универсального селектора символ * можно опустить, но это может ухудшить восприятие кода.

Комбинаторы

В таблице ниже представлены комбинаторы, которые можно использовать в селекторе (Sel1 и Sel2 - простые селекторы).

Комбинатор Элемент страницы
Sel1 Sel2 Элемент Sel2, который является потомком элемента Sel1.
Sel1 > Sel2 Элемент Sel2, который является дочерним для элемента Sel1.
Sel1 ~ Sel2 Элемент Sel2, который является сестринским для элемента Sel1.
Sel1 + Sel2 Элемент Sel2, который является сестринским для элемента Sel1 и следует непосредственно за ним.

Группировка селекторов

Если разным селекторам применяются одинаковые свойства, тогда их можно сгруппировать для оптимизации кода. В этом случае селекторы записываются через запятую.

h1 {font-size: 150%;}
*.header {font-size: 150%;}
/* эквивалентно */
h1, *.header {font-size: 150%;}

При группировке селекторов следует учитывать тот факт, что если хотя бы один из селекторов будет иметь недопустимый формат, тогда вся группа селекторов будет считаться недопустимой и стили будут проигнорированы для всех элементов.

h1 {font-size: 150%;} /* применится */
*..header {font-size: 150%;} /* не применится */
/* не эквивалентно */
h1, *..header {font-size: 150%;} /* не применится */