Патэрн | Смысл | Описан в разделе |
---|
* | совпадает любой элемент. | Универсальный селектор |
E | совпадает любой элемент E (т.е. элемент типа E). | Типы селекторов |
E F | совпадает любой элемент F, являющийся потомком элемента E. | Селекторы-потомки |
E > F | совпадает любой элемент F, являющийся дочерним относительно элемента E. | Дочерние селекторы |
E:first-child | совпадает элемент E, если E является первым дочерним элементом своего родителя. | Псевдокласс :first-child |
E:link E:visited | совпадает элемент E, если E является якорем ещё не посещённого ресурса гиперссылки (:link) или уже посещённого (:visited). | Псевдоклассы гиперссылки |
E:active E:hover E:focus | совпадает элемент E во время определённых действий пользователя. | Динамические псевдоклассы |
E:lang(c) | совпадает элемент типа E, если он на (человеческом) языке с (язык документа специфицирует то, как определяется язык). | Псевдокласс :lang() |
E + F | совпадает любой элемент F, непосредственно перед которым идёт элемент E. | Смежные селекторы |
E[foo] | совпадает любой элемент E с установленным атрибутом "foo" (с каким-либо значением). | Селекторы атрибутов |
E[foo="warning"] | совпадает любой элемент E, чьё значение атрибута "foo" точно равно "warning". | Селекторы атрибутов |
E [foo~="warning"] | совпадает любой элемент E, чьё значение атрибута "foo" является списком разделённых пробелами значений, одно из которых точно равно "warning". | Селекторы атрибутов |
E [lang|="en"] | совпадает любой элемент E, чей атрибут "lang" содержит список разделённых дефисами значений, начинающийся (слева) с "en". | Селекторы атрибутов |
DIV.warning | Только в HTML. То же, что DIV[class~="warning"]. | Селекторы классов |
E#myid | совпадает любой ID элемента E, эквивалентный "myid". | Селекторы ID |
Простой селектор - селектор типа или универсальный селектор, непосредственно после которого идёт ноль или более селекторов атрибутов, селекторов ID или псевдоклассов в любом порядке. Простой селектор совпадает, если совпадают все его компоненты.
Селектор это цепь из одного или более простых селекторов, разделённых комбинаторами. Комбинаторами являются: пробелы, ">" и "+". Пробелы могут появляться между комбинатором и простыми селекторами вокруг него.
Элементы дерева документов, совпадающие с селектором, называются субъектами селектора. Cелектор, состоящий из одного простого селектора, совпадает с любым элементом, удовлетворяющим его условиям. Предопределённость простого селектора и комбинатора в цепи вызывает дополнительные ограничения для совпадения, так что субъекты селектора всегда являются поднабором элементов, совпадающим с самым правым простым селектором.
Один псевдоэлемент может быть присоединён к последнему простому селектору в цепи, и в этом случае информация стиля применяется к подразделу каждого субъекта.
Если несколько селекторов используют общие объявления, то они могут быть сгруппированы в список с разделением запятыми.
Здесь три правила с идентичными объявлениями собраны в одно. Таким образом,
H1 { font-family: sans-serif }
H2 { font-family: sans-serif }
H3 { font-family: sans-serif }
эквивалентно:
H1, H2, H3 { font-family: sans-serif }