Учебник CSS : Селекторы
Правила каскадных таблиц стилей, в которых в качестве селектора используются тэги HTML, влияют на отображение всех элементов заданного типа в документе. Следующие правило отображает без подчёркивания все ссылки (тэг <A>) в документе:
<STYLE type="text/css">
<!--
A { text-decoration: none; }
-->
</style>
А что делать, если необходимо некоторые ссылки отобразить по-другому? Можно задать для них правило форматирования непосредственно в тэге, а можно применить параметр class, добавленный в HTML 4.0 в качестве стандарта для всех тэгов. Значением параметра class является ссылки на класс, задаваемый в таблице стилей.
Селектор class
Класс позволяет задать разные правила форматирования для одного элемента определённого типа или всех элементов документа. Имя класса указывается в селекторе правила после имени тэга и отделяется от него точкой. Можно определить несколько правил форматирования для одного элемента и с помощью параметра class соответствующего тэга применять разные правила форматирования в документе. Например, можно определить два класса отображения заголовка первого уровня:
<STYLE type="text/css">
<!--
H1.red { color: red; }
H1.blueBgrd { color: red; background-color: blue }
-->
</style>
В тексте документа ссылка на соответствующий класс задаётся в параметре class:
<H1 class="red">Красный
шрифт</h1>
<H1 class="blueBgrd">Красный шрифт на синем фоне</h1>
В параметре имя класса может быть заключено в двойные или одинарные кавычки, или задаваться вообще без кавычек.
В приведённом примере классы задавались для разного отображения элементов одного типа. Если класс должен применяться ко всем элементам документа, то в селекторе задаётся имя класса с лидирующей точкой без указания конкретного элемента:
<STYLE type="text/css">
<!--
.red { color: red; }
.blueBgrd { color: red; background-color: blue }
-->
</style>
Теперь два класса red и blueBgrd можно применить к любым элементам документа:
<P class=red>Первый
абзац</p>
<P class=blueBgrd>Второй абзац</p>
Селекрор ID
Параметр id задаёт уникальное имя элемента, которое используется для ссылок на него в сценариях JavaScript и таблицах стилей. Параметр id можно применить к любому элементу документа.
Правила таблиц стилей регламинтируют использование уникального идентификационного имени элемента в качестве селектора, предваряя его символом #:
<STYLE type="text/css">
<!--
#par24 { letter-spacing: 1em; }
#form3 { color: red; background-color: blue }
-->
</style>
<BODY>
<P id="par24">Разрежённые слова</p>
<P id="form2">Чёрный шрифт</p>
В этом примере абзац идентифицирован именем par24 в параметре id, поэтому к нему применимо правило с селектором #par24. Второе правило в таблице стилей должно применяться к заголовку первого уровня с идентификатором form3. Такого элемента в нашем фрагменте HTML-кода нет, а заголовок form2 отображается с применением правила по умолчанию.
Контекстные селекторы
При разработке страниц HTML часто приходиться одни элементы вкладывать в другие, например, выделять слова тэгом <EM> в каком-нибудь абзаце задаваемом тэгом <P>. В этом случае говорят, что элемент <P> порождает элемент <EM> и является его предком, а сам элемент <EM> является потомком элемента <P>. Некоторые свойства предка наследуются потомком, например, цвет шрифта (свойство color). Если необходимо чтобы выделяемые только в абзацах элементы отображались одним образом, а в других частях документа по- другому применяют контекстные селекторы. Например, для отображения в абзацах текста выделеного тэгами <EM> шрифтом жёлтого цвета необходимо задать следующее правило:
P EM { color: yellow }
Контекстный селектор состоит из нескольких простых, разделённых пробелами. Интерпритатор браузера просматривает в стеке все открытые элементы, находит элементы <EM>, порождённые элементом <P>, и применяет к ним указанное правило форматирования.
Псевдоклассы ссылок
Обычно браузеры отображают посещённые ссылки отлично от непосещённых (например, разными цветами). CSS1 регламентирует правила для отображения ссылок через псевдоклассы элемента A:
A:link { color: red
} /*непосещённая ссылка*/
A:visited { color: blue }
/*посещённая ссылка*/
A:active { color: green }
/*активная ссылка*/
A:hover { color: lime }
/*ссылка, выбранная курсором мыши*/
Активная ссылка - это ссылка, которая выбрана в данный момент, причём необязательно курсором мыши, а, например, при помощи клавиши Tab.
Любую ссылку в документе можно отнести к одному из перечисленных классов.
В каскадных таблицах текст, заключённый между символами /* и */, является комментарием.
Так называемые псевдоклассы применяются к единственному типу элементов - <A>, поэтому при задании их в селекторе правил этот элемент можно опустить. Следующие два правила равносильны:
A:link { color: red }
/*непосещённая ссылка*/
:link { color: red }
/*непосещённая ссылка*/