Множественные классы

Селектор этого типа содержит несколько имен классов, разделенных точкой (.). В языке HTML значением атрибута class может быть не только одиночное имя класса, но и список имен классов, разделенных пробелами; при этом порядок имен классов значения не имеет. Например:

<p class=”urgent warning”>Текст абзаца</p>

Предположим, что имеются следующие три правила:

.warning {font-weight: bold;}

.urgent {font-style: italic;}

.warning.urgent {background: silver; }

Первые два правила будут применяться обычным образом к тегам, в значении атрибута class которых имеются имена классов urgent или warning, соответственно. В частности, оба эти правила будут применены к абзацу, приведенному выше в качестве примера. Третье же правило, в селекторе которого через точку перечислены оба класса, будет применяться только к тегам, значение атрибута class которых содержит имена обоих классов, в том числе и к нашему абзацу.

Псевдоэлементы

В дереве элементов присутствуют только те элементы, для которых в HTML существуют соответствующие конструкции. Например, в языке HTML нет элемента, который соответствовал бы первой строке или первой букве абзаца. Эти элементы нельзя найти в дереве элементов, а следовательно, нельзя применить к ним стиль оформления. Для этого в CSS было введено понятие псевдоэлемента. Приставка "псевдо" в данном случае означа­ет, что с точки зрения HTML такого элемента не существует, но он существует на HTML­ странице, и eго можно использовать в качестве селектора для написания СSS-­правила. Эти псевдоэлементы перечислены в табл. 3.

Таблица 3 Список псевдоэлементов

Формат	Название	Условие стилизации элемента
a:first-letter	Первая буква	Первая буква текста элемента a.
a:first-line	Первая строка	Первая строка отображенного браузером текста элемента a.
a:after	После	Добавляет контент после элемента a.
a:before	Перед	Добавляет контент перед элементом a.

Псевдоэлемент first-letter

Этот псевдоэлемент позволяет создавать буквицы, т. е. применять особое оформление к первой букве элемента. Без использования псевдоэлементов буквицу можно создать, например, следующим способом.

Первая буква каждого абзаца помещается между теrами <span> с классом firstletter:

<p><span сlаss="firstlеttеr">Б</span>уквица без псевдоэлементов</p>

­Затем определяется правило, например, чтобы буква была синего цвета с жирным начертанием, имела шрифт Ver­dana большего размера, чем текст:

span.firstletter {color: blue; font: bold large Verdana, sans-­serif}

­С использованием псевдоэлемента ситуация значительно упрощается. Достаточно иметь в НТМL-­коде обычные абзацы:

<p>Буквица с использованием псевдоэлемента</p>

а в правиле использовать псевдоэлемент first­-letter:

p:first-letter {color: blue; font: bold large Verdana, sans-­serif}

Имя псевдоэлемента пишется через двоеточие (:) после имени тега, к содержимому которого следует использовать этот псевдоэлемент.

При использовании псевдоэлемента first-­letter не требуется выделять вручную первые буквы внутри абзацев, так как к ним автоматически будет применен стиль из правила с селектором p:first­-letter. В результате первая буква каждого абзаца станет крупной, полужирной и синей, как и в предыдущем случае.

Если нужно, чтобы текст обтекал первую букву, то можно дополнительно задать значение свойства float:left; тогда буква будет прижиматься к левому краю страницы, а текст будет ее обтекать:

p:first-­letter{color: blue; font: bold 24pt Verdana, sans-­serif; float: left}