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

Для HTML-документов CSS поддерживает селекторы классов, которые основаны на использовании атрибутаclassи имеют видelement.class.

P.warning { font-style: italic }

Тогда следующий элемент HTML-документа

<P class="warning">Рекомендуется выбирать названия классов,

отражающие их назначение.</P>

будет отображаться курсивным шрифтом.

Селектор класса может не содержать названия элемента, например

.warning{ font-style: italic }

Такое правило относится ко всем элементам, имеющим атрибут class="warning".

Примечание. Селектор класса, не содержащий имени элемента, следует понимать как селектор*.class, в котором универсальный селектор * опущен.

CSS позволяет задавать и подмножества значения атрибута class, например правило

P.warning.red { font-style: italic }

будет применимо к элементам с атрибутом class="warning red", но не применимо к элементам с атрибутомclass="warning blue".

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

Документы могут содержать элементы с атрибутами id, задающими уникальные идентификаторы этих элементов. Соответствующийселектор идентификаторав CSS имеет видelement#idили просто#id.

Примечание. Селектор идентификатора, не содержащий имени элемента, следует понимать как селектор*#id, в котором универсальный селектор * опущен.

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

Существуют четыре вида селекторов атрибутов:

[attr]

Применяется ко всем элементам, имеющим атрибут attr, независимо от его значения.

[attr=value]

Применяется ко всем элементам, чей атрибут attrимеет значениеvalue.

[attr~=value]

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

[attr|=value]

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

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

h1[title] { color: blue } /* Применяется ко всем элементам H1, */

/* имеющим атрибут title */

span[class="example"] { color: blue } /* Применяется ко всем элементам SPAN, */

/* имеющим атрибут class="example" */

span[class~="example"] { color: blue } /* Эквивалентно селектору SPAN.example */

*[lang="fr"] { display: none } /* Применяется ко всем элементам, */

/* имеющим атрибут lang="fr" */

*[lang|="en"] { color: red } /* Применяется ко всем элементам, у которых */

/* атрибут lang начинается с "en" (например, */

/* "en-us" или "us-gb") */

К сожалению, они пока не поддерживаются Веб-обозревателями

Селекторы потомков

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

div * em{ color: blue }

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

Селекторы детей

CSS поддерживает использование селекторов детей, т. е. селекторов тех элементов, которые являются детьми другого элемента в дереве документа. Селекторы детей образуются путем соединения нескольких селекторов символом ">". Следующее правило будет применяться ко всем элементамp, которые являются детьми элементаbody(иными словами, оно применимо к тем и только тем элементамp, которые находятся внутри элементаbody, и никакого промежуточного элемента междуbodyиpнет):

body > p { text-indent: 3em }