Учебник 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 }  /*непосещённая ссылка*/