Id в качестве селектора

HTML также теперь определяет атрибут 'ID', который гарантированно имеет уникальное значение в документе. Таким образом он имеет особое значение, как селектор таблицы стилей, и может адресоваться с помощью '#':

#z98y { letter-spacing: 0.3em }

H1#z98y { letter-spacing: 0.5em }

<P ID=z98y>Широкий текст</P>

В приведенном примере первый селектор соответствует элементу 'P' благодаря 'ID' атрибута. Второй селектор определяет как тип элемента ('H1'), так и значение ID, и, поэтому, не соответствует элементу 'P'.

Используя ID в качестве селектора, можно устанавливать свойства поэлементно. В то время как таблицы стилей были разработаны для визуализации структуры документа, это свойство позволяет авторам создавать документы, которые корректно отображаются на холсте без использования структурных элементов HTML. Такое использование таблиц стилей не приветствуется.

Однако и в ID существует необходимость, когда автор стремится придать одному или нескольким элементам одного класса индивидуальные свойства. Скажем, Вы создали класс blue - синий курсив. Но Вам понадобился жирный подчеркнутый текст синим курсивом. Конечно, можно создать новый класс, но зачем? Проще описать ID. Например "boldunderline". И все элементы класса blue с значением ID "boldunderline" станут жирным подчеркнутым синим курсивом. Произойдет как бы синтез свойств класса blue и идентификатора boldunderline.

Контекстные селекторы

Наследование значительно уменьшает количество напечатанного текста CSS дизайнерами. Вместо того, чтобы указывать все свойства стилей, можно установить значения по умолчанию, а затем указать исключения. Для того, чтобы элементы 'EM' внутри 'H1' имели другой текст, можно было бы указать:

H1 { color: blue }

EM { color: red }

Когда данная таблица стилей будет использована, весь текст внутри 'EM', как внутри, так и вне 'H1' станет красным. Очевидно, хотелось, чтобы только те элементы 'EM', которые заключены в 'H1' стали красными. Этого можно достигнуть, указав:

H1 EM { color: red }

В этом случае селектор является маской поиска в стеке открытых элементов, а такой селектор называется контекстным селектором. Контекстные селекторы состоят из простых селекторов, разделенных пробелом (все описываемые до этого селекторы являлись простыми селекторами). Описанные правила применяются только к элементу, который соответствует последнему простому селектору (в данном случае элемент 'EM'), и только в том случае, если результат поиска является положительным. Контекстные селекторы в CSS1 описывают только наследственные взаимосвязи, в то время как последующие версии могут описывать м другие виды связи.

UL LI { font-size: small } UL UL LI { font-size: x-small }

В этом случае первый селектор соответствует элементам 'LI' в как минимум одним предком 'UL'. Второй селектор соответствует подмножеству первого, т.е. элементы 'LI' с как минимум двумя предками 'UL'. Конфликт разрешается тем, что второй селектор является более специфичным в связи с более длинной маской поиска. См. подробнее о порядке каскадирования.

Контекстные селекторы могут содержать тип элемента, атрибуты CLASS, атрибуты ID или их комбинацию:

DIV P { font: small sans-serif }

.reddish H1 { color: red }

#x78y CODE { background: blue }

DIV.sidenote H1 { font-size: large }

Первый селектор соответствует элементам 'P', которые среди предков имеют 'DIV'. Второй селектор соответствует всем элементам 'H1' которые имеют предка класса 'reddish'. Третий селектор соответствует всем элементам 'CODE', которые являются наследниками элемента с 'ID=x78y'. Четвертый селектор соответствует всем элементам 'H1', которые имеют предка 'DIV' с классом 'sidenote'.

Можно группировать несколько контекстных селекторов:

H1 B, H2 B, H1 EM, H2 EM { color: red }

что эквивалентно:

H1 B { color: red }

H2 B { color: red }

H1 EM { color: red }

H2 EM { color: red }

Комментарии

Текстовые комментарии в таблицах стилей оформляются так же как и в языке Си:

EM { color: red } /* red, really red!! */

Комментарии не могут вкладываться друг в друга. Для обработчика CSS1 комментарий эквивалентен пробелу.