Что такое селекторы и как их правильно использовать
В следующем примере используются два селектора – h1 и h2. Это означа- ет, что указанные стили будут применяться ко всем элементам h1 и h2:
h1, h2 {
font-family: sans-serif;
color: #3366CC;
}
Решение
В этом разделе представлено описание широко используемых в насто- ящее время селекторов CSS2.1 с примерами их практического исполь- зования.
Селекторы типа
Самыми простыми селекторами являются селекторы типа, с которы- ми мы уже встречались в приведенных выше примерах. Адресация по имени HTML-элемента обеспечивает применение правила стиля ко всем элементам с данным именем, присутствующим в документе. Се- лекторы типа часто используются для определения основных стилей для всех страниц сайта. К примеру, следующее правило стиля задает шрифт абзаца, используемый на сайте по умолчанию:
p {
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
color: #000000;
}
Таким образом устанавливается шрифт, размер и цвет для всех абзацев
(элементов p) в документе.
Селекторы класса
Задавать стили для элемента, конечно, удобно, однако что делать, если возникает необходимость определения различных стилей для несколь- ких элементов одного типа, размещенных в различных частях страни- цы? На помощь придут классы.
Рассмотрим следующий пример, в котором задается синий цвет шриф- та для всех абзацев:
p {
color: #0000FF;
}
Отлично! А теперь представьте, что на вашей странице будет располо- жена боковая панель с голубым фоном. При этом голубой текст на па- нели сольется с ним, и разобрать что-либо станет просто невозможно. Эту проблему можно решить, определив класс для текста, выводимого на боковой панели, а затем задав для этого класса необходимый стиль с помощью CSS.
Для создания абзаца класса sidebar необходимо вначале добавить атри- бут class с соответствующим значением в открывающий тег:
<p class=”sidebar”>This text will be white, as specified by the CSS style definition below.</p>
Затем можно приступить к описанию стиля для данного класса:
p {
color: #0000FF;
}
.sidebar {
color: #FFFFFF;
}
Во втором правиле используется селектор класса, определяющий стиль для любого элемента со значением sidebar атрибута class. Перед именем ставится точка, указывающая, что это класс, а не HTML-элемент.
А если на панели также присутствуют ссылки? По умолчанию все ссылки в вашем документе будут оформлены одинаковым образом. Од- нако, если добавить в тег ссылки атрибут class=”sidebar”, они также ста- нут белыми:
<p class=”sidebar”>This text will be white, <a class=”sidebar”
href=”link.html”>and so will this link</a>.</p>
Прекрасно. Но, возможно, вам хотелось бы, чтобы ссылки отличались от основного текста? К примеру, им можно было бы придать жирное на- чертание. Добавление описания стиля для жирного начертания тек- ста к набору стилей для класса sidebar приведет к тому, что весь текст
на панели будет выведен жирным шрифтом, что противоречит постав- ленной нами цели. Нужен CSS-селектор для выбора ссылок, размещен- ных внутри элемента класса sidebar. Далее путем комбинации селекто- ра типа и селектора класса можно добиться желаемого эффекта:
p {
color: #0000FF;
}
.sidebar {
color: #FFFFFF;
}
a.sidebar:link, a.sidebar:visited {
font-weight: bold;
}
Обратите внимание, что в данном примере используются псевдоклассы
:link и :visited. Мы поговорим о псевдоклассах чуть позже в этой главе.
Если вы добавите приведенные выше стили в таблицу стилей вашего сайта и обновите страницу в броузере, то увидите, что ссылки будут отображены жирным шрифтом белого цвета, поскольку к ним были применены оба определенных для класса sidebar правила стилей. Одна- ко если бы мы добавили в третье правило стиль изменения цвета шриф- та, цвет ссылок также был бы изменен, поскольку третий селектор бо- лее конкретен, а правила CSS применяются в порядке увеличения кон- кретности селекторов.
Кстати, процесс применения различных правил стилей к одному и тому же элементу называется каскадированием; отсюда и термин «каскад- ные таблицы стилей». Ближе к концу главы мы узнаем о степени кон- кретности различных селекторов и правилах каскадирования.
Селекторы ID
В отличие от селекторов класса, определяющих стиль для группы эле- ментов, селекторы ID используются для присваивания стиля одно- му конкретному элементу. Чтобы воспользоваться таким селектором, необходимо прежде всего добавить атрибут id элементу, стиль кото- рого должен быть изменен. Важно помнить, что идентификатор (ID) в HTML-документах уникален:
<p id=”tagline”>This paragraph is uniquely identified by the ID “tagline”.</p>
В качестве ссылки на данный элемент (посредством селектора ID) не- обходимо указать идентификатор с предшествующим ему знаком «ре- шетка» (#). К примеру, следующее правило стиля задает белый цвет шрифта для приведенного выше абзаца:
#tagline {
color: #FFFFFF;
}
Селекторы ID можно использовать совместно с селекторами других типов. В следующем примере правило стиля применяется ко всем эле- ментам класса new, расположенным внутри абзаца со значением tagline атрибута id:
#tagline .new {
font-weight: bold;
color: #FFFFFF;
}
Использованный в данном примере селектор называется контекстным;
селекторам этого типа посвящен следующий раздел.
Контекстные селекторы
Если на панели расположено несколько абзацев, можно добавить атри- бут класса каждому открывающему тегу <p>. Однако гораздо лучше указать атрибут class со значением sidebar для элемента, служащего контейнером, а затем изменить цвет каждого расположенного внутри контейнера элемента p на белый. Для этого достаточно написать всего одно правило стиля с использованием контекстного селектора (селек- тора-потомка).
Ниже приведено правило с новым селектором:
p {
color: #0000FF;
}
.sidebar p {
color: #FFFFFF;
}
А так выглядит обновленный HTML-код:
<div class=”sidebar”>
<p>This paragraph will be displayed in white.</p>
<p>So will this one.</p>
</div>
Как видите, контекстный селектор состоит из списка селекторов, раз- деленных пробелами, соответствующих элементам страницы от внеш- них к внутренним. В данном случае на странице имеется элемент div класса sidebar, и контекстный селектор .sidebar p ссылается на все эле- менты p, расположенные внутри этого div.
Дочерние селекторы
Контекстный селектор ссылается на всех потомков родительского эле- мента, в том числе и непрямых потомков.
Рассмотрим следующий код:
<div class=”sidebar”>
<p>This paragraph will be displayed in white.</p>
<p>So will this one.</p>
<div class=”tagline”>
<p>If we use a descendant selector, this will be white too. But if we use a child selector, it will be blue.</p>
</div>
</div>
В данном примере используется контекстный селектор из предыдуще- го раздела – .sidebar p. Он ссылается на все элементы p, вложенные в div класса .sidebar p, включая и абзацы, расположенные внутри div класса tagline. Чтобы указанное оформление распространялось исключитель- но на прямых потомков элемента div класса sidebar, следует использо- вать дочерний селектор. Для указания прямого потомка в селекторе используется знак >.
В приведенном ниже коде используется новый селектор для задания бе- лого цвета текста абзацев, расположенных непосредственно внутри эле- мента div класса sidebar (но не внутри элемента div класса tagline):
p {
color: #0000FF;
}
.sidebar>p {
color: #FFFFFF;
}
Предупреждение
Internet Explorer 6 не поддерживает псевдокласс :first-child. Как оказа- лось, броузер IE6 не поддерживает и селектор псевдокласса :first-child, по- этому, если задаваемый с их помощью стиль важен для форматирования стра- ницы, следует найти альтернативный способ адресации.
Литература: Эндрю Р. CSS: 100 и 1 совет, 3-е издание. – Пер. с англ. – СПб: Символ-Плюс, 2010. – 336 с., ил.