Блоки символов для подстановки
В CSS правила совпадения символов определяют, какое правило стиля применить к элементам дерева документа. Такие блоки символов (патэрн), называемые селекторами, могут иметь диапазон имён от простых имён элементов до сложных контекстуальных блоков. Если все условия в патэрн верны для конкретного элемента, селектор совпадает с элементом.
Чувствительность к регистру имён элементов в селекторах зависит от языка документа. Например, в HTML имена элементов нечувствительны к регистру, а в XML - чувствительны к регистру.
В этой таблице суммирован синтаксис селекторов CSS2:
* | совпадает любой элемент. | Универсальный селектор | |
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 |