4.4. Селектор CALSS

В приведенных выше примерах, в качестве селекторов использовались теги языка HTML и, соответственно, в HTML-документе они применялись с указанными стилями. Но что делать, если нужно применить тот или иной стиль лишь к некоторому числу тегов на странице, например к первому тегу <p>, а ко всем остальным тегам <p> не применять? Этого можно достичь несколькими способами. В самом простом случае использовать атрибут style у первого тега <p> и задать нужное свойство, например, так:

<p style="color:#00cc00">Это первый тег p</p>
<p>Это второй тег p<p>

Однако такая запись стилей непосредственно внутри тега приводит к объединению содержания страницы и ее виду, что в итоге усложняет последующее редактирование такого документа. Лучше задать необходимый стиль в таблице CSS и подключить его только к нужным тегам на странице. Для этого используется атрибут class, существующих у всех тегов языка HTML. Через этот атрибут можно указывать стили по их имени, используемые в данном теге. Это выглядит следующим образом. В таблице CSS задается стиль в виде:

.mystyle {
color: black;
font-size: 14px;
background: #f0f0f0;
}

и подключается к первому тегу <p> с помощью атрибута class:

<p class="mystyle">Это первый тег p</p>
<p>Это второй тег p</p>

в итоге стиль mystyle будет применен только к первому тегу <p> HTML-документа. Аналогичным образом с помощью атрибута class можно подключить этот стиль только к выбранным тегам на странице.

Здесь следует обратить внимание, что перед именем стиля в CSS стоит точка. Точка означает, что данное имя является именем класса и будет подключаться к тегам через атрибут class. Если убрать точку перед именем, то документ будет отображен со стилями по умолчанию, т.к. класс mystyle не будет идентифицирован браузером и соответственно не подключится к тегу. При этом никаких сообщений об ошибке выдаваться не будет.

Если требуется определить класс исключительно для одного определенного тега языка HTML, то его следует указать перед именем класса, как это показано ниже:

p.mystyle {
color: black;
font-size: 14px;
background: #f0f0f0;
}

и подключить в HTML-странице:

<p class="mystyle">Это первый тег p</p>
<p>Это <span class="mystyle">второй</span> тег p</p>
<b class="mystyle">Это тег b</b>

Рис. 4.3. Пример задания класса для тега <p>

Из рис. 4.3. видно, что заданные стили применяются только к тегу <p>, хотя подключаются и в тегах <span> и <b>. Это свойство удобно использовать для селекции тегов, к которым применяются стили.

Еще одной полезной особенностью селектора class является возможность создавать иерархию классов, когда дополнительные классы расширяют общий заданный стиль базового класса. Для создании иерархических классов, сначала описывается базовый класс (при необходимости):

.basestyle {
     font-family: Arial;
     color: #000000;
     font-size: 14px;
}

а затем задается дополнительный к нему класс в виде:

.basestyle.extended {
     background: #f0f0f0;
}

Обратите внимание, что между определением классов basestyle и extended записана точка без пробелов! Наличие пробела в данном случае приведет к заданию двух разных классов с одним свойством background.

Класс extended используется только в том случае, если в текущем теге указан класс basestyle в атрибуте class:

<p class="basestyle">Текст со стилем basestyle</p>
<p class="basestyle extended">Текст со стилем basestyle.extended</p>
<p class="extended">Текст со стилем extended</p>

Рис. 4.4. Пример использования иерархических классов в CSS

Из рис. 4.4. видно, что класс extended применен только ко второму тегу <p> и проигнорирован третьим тегом <p>, т.к. в нем отсутствует базовый класс basestyle. При этом стоит иметь в виду, что вложенные классы корректно обрабатываются только современными браузерами, а устаревшие будут считать, что это два разных класса и независимо применять их к тегам. Это, в частности, касается браузера Internet Explorer 6.0, поддержка которого давно прекращена и который считается устаревшим.

Используя классы при описании стилей можно задавать контекстные стили по аналогии с ранее рассмотренными контекстными селекторами на базе тегов языка HTML. Например, можно задать стиль

.style {
     padding: 5px;
}

и определить контекстный селектор для тега <b>:

.style b {
     color: green;
}

в результате зеленый цвет шрифта будет присвоен только тем тегам, которые находятся внутри тега с параметром class="style", например,

<b>Это не вложенный тег b</b>
<div class="style">
     <b>Это вложенный тег b в тег div, имеющий class="style"</b>
</div>

В итоге в окне браузера будет отображена информация в следующем виде (рис. 4.5):

Рис. 4.5. Пример контекстного селектора на базе класса

Подобным образом можно определять и более сложные контексты, например, так:

.style p b {
     color: blue;
}

или так:

.style span, p b {
     color: gray;
}

в этих примерах, для применения стиля к тегу <b> необходимо, чтобы он находился внутри тега с параметром class="style" и дополнительно был вложен в тег <p>, т.е.

<div class="style">
<p><b>Это тег b, вложенный в тег p</b></p>
<b>Это тег b, не вложенный в тег p</b>
<span>Это тег span</span>
 
</div>

В итоге получим, что первая строка будет отображена черным шрифтом, а вторая – синим.

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

.style1 .style2 {
     background: #a0a0a0;
}

здесь style2 вложен в style1, который становится активным только при вложении в style1 на странице HTML-документа.