Селекторы идентификаторов
Документы могут содержать элементы с атрибутами ID, задающими уникальные идентификаторы этих элементов. Для HTML-документов это атрибут id. Соответствующий селектор идентификатора в CSS имеет вид element#id или просто #id.
Примечание. Селектор идентификатора, не содержащий имени элемента, следует понимать как селектор *#id, в котором универсальный селектор * опущен.
В примере
<HEAD>
<STYLE type="text/css">
#p001 { letter-spacing: 0.3em }
</STYLE>
</HEAD>
<BODY>
<P id="p001">Разреженный текст</P>
</BODY>
правило стиля будет применено к элементу P с атрибутом id="p001". С другой стороны, в следующем примере
<HEAD>
<STYLE type="text/css">
H1#p001 { letter-spacing: 0.3em }
</STYLE>
</HEAD>
<BODY>
<P id="p001">Широкий текст</P>
</BODY>
правило стиля применимо только к элементу H1 с атрибутом id="p001" и поэтому не будет применено к элементу P с этим атрибутом.
| Поддержка : |  | Полное соответствие стандарту (5.0+) | | |  | Полное соответствие стандарту (4.0+) |
Селекторы атрибутов
Теперь рассмотрим простые селекторы, которые являются уточнением базовых селекторов. Выше мы уже познакомились с двумя типами простых селекторов, которые применяются для задания стилей HTML-документов: селекторы классов и селекторы идентификаторов. Здесь мы познакомимся еще с одной группой селекторов, а именно с селекторами атрибутов. Эти селекторы обладают мощным и гибким синтаксисом и предназначены для работы с любыми документами, которые поддерживаются языком CSS. К сожалению, они пока не поддерживаются Веб-обозревателями. Существуют четыре вида селекторов атрибутов:
[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") */ |
| Поддержка : | | Не поддерживаются | | | | Не поддерживаются |
Селекторы потомков
Перейдем теперь к рассмотрению составных селекторов, которые образуются из простых селекторов путем их соединения в новый селектор. Важнейшими из составных селекторов являются селекторы потомков, т. е. селекторы тех элементов, которые являются потомками другого элемента в дереве документа. Рассмотрим такую задачу: определить стиль отображения всех элементов EM, которые находятся внутри элементов H1. Для этого мы могли бы написать следующий набор правил:
H1 { color: red }
EM { color: red }
H1 EM { color: blue }
Здесь первые два правила определяют стили отображения для всех элементов H1 и EM соответственно, а третье правило как раз и решает нашу задачу. Таким образом, для задания селектора потомка достаточно образовать селектор из селектора, задающего предка, и селектора, задающего потомка, разделив их пробелом. Рассмотрим еще один пример:
DIV * EM { color: blue }
Данное правило будет применяться ко всем элементам EM, которые находятся внутри любых элементов (универсальный селектор), которые заключены в элемент DIV.
| Поддержка : | | Полное соответствие стандарту (5.0+) | | | | Не поддерживает универсальные селекторы (4.0+) |
Селекторы детей
CSS поддерживает использование селекторов детей, т. е. селекторов тех элементов, которые являются детьми другого элемента в дереве документа. Селекторы детей образуются путем соединения нескольких селекторов символом ">". Следующее правило будет применяться ко всем элементам P, которые являются детьми элемента BODY (иными словами, оно применимо к тем и только тем элементам P, которые находятся внутри элемента BODY, и никакого промежуточного элемента между BODY и P нет):
BODY > P { text-indent: 3em }
В следующем примере сочетаются селекторы потомков и селекторы детей:
DIV OL>LI P { line-height: 1.5 }
Субъектом этого правила будет элемент P, который является потомком элемента LI, который является ребенком элемента OL, который является потомком элемента DIV. Обратите внимание, что необязательные пробелы вокруг символа ">" в этом примере опущены.
| Поддержка : | | Не поддерживаются | | | | Не поддерживаются |
Селекторы соседей
CSS поддерживает использование селекторов соседей, т. е. селекторов тех элементов, которые являются братьями в дереве документа и расположены в документе непосредственно друг за другом. Селекторы соседей образуются путем соединения нескольких селекторов символом "+". Следующее правило уменьшает расстояние между элементами H1 и H2, если H2 непосредственно следует в документе за H1:
H1 + H2 { margin-top: -5mm }
Приведем аналогичный пример, но в нем элемент H1 должен относиться иметь атрибут class="opener":
H1.opener + H2 { margin-top: -5mm }
| Поддержка : | | Не поддерживаются | | | | Не поддерживаются |
1 2 3
8 8 8
| |
*
Обратная связь