Селекторы

Селекторы определяют, к каким именно элементам документа будут применены те или иные свойства.[1]

Содержание

Группировка

Перечисление нескольких селекторов (простых или сложных) в любом порядке через запятую позволяет выбрать элементы, соответствующие любому из таких селекторов.

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

Спецификация определяет следующие типы простых селекторов.[1] (В данном разделе мы опустим особенности использования различных пространств имен, которые становятся актуальными в случае включения в HTML-документ документов SVG или MathML.)

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

Универсальный селектор

Селектор * Соответствует любому элементу в объектной модели документа.

Вне сложного селектора, может быть использован для задания значения каких-либо свойств по-умолчанию (подобно: * { text-align: justify; }), но ввиду наличия в CSS механизма наследования — потребность в этом едва ли может возникнуть на практике. (Cf.: body { text-align: justify; }.)

Селектор типа

Селектор Э соответствует элементам типа Э. Например, i { font-style: italic; } — задает курсивное начертание для элементов типа i.

Селекторы по атрибутам

[имя-атрибута]
[имя-атрибута = значение]
[имя-атрибута ~= включаемое-значение]
[имя-атрибута |= начало-значения]
[имя-атрибута *= включаемое-значение]
[имя-атрибута ^= начало-значения]
[имя-атрибута $= конец-значения]

Соответствует элементам, имеющим атрибут с именем имя-атрибута. Указанное значение — ограничивает соответствие только теми элементами, значение данного атрибута которых в точности совпадает с этим значением.

Для форм ~= включаемое-значение и |= начало-значения — требует, чтобы значение содержалось в значении атрибута (как отделенное пробелами слово), или совпадало с началом значения (с отделением последующего текста, если есть, символом -), соответственно.

Селектор класса

Селектор .имя-класса соответствует элементам, принадлежащим классу имя-класса. В HTML, классы элемента определяет атрибут class (подобно: <i class="thought-to-myself" lang="en" >What a wonderful world.</i>.)

Селектор идентификатора

Селектор #идентификатор соответствует элементу, имеющему заданный идентификатор. В HTML, идентификатор элемента определяет атрибут id.

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

:link, :visited, :hover, :active, :focus, :target, :lang(), :enabled, :disabled, :checked, :indeterminate, :root, :nth-child(), :nth-last-child(), :nth-of-type(), :nth-last-of-type(), :first-child, :last-child, :first-of-type, :last-of-type, :only-child, :only-of-type, :empty, :not().

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

::first-line, ::first-letter, ::before, ::after.

Комбинаторы

Э Ю
Э > Ю
Э + Ю
Э ~ Ю

Примечания

  1. 1,0 1,1 Selectors Level 3. W3C. Проверено 1 октября 2015.

© 2015 Иван Шмаков, CC BY-SA 3.0+.