Теперь предположим, что мы хотим изменить свойства элемента H1 и слова важный внутри строки. Если мы используем CSS-код, описанный ниже, то повлияем на все элементы EM на странице, а этого делать не нужно:
h1 { color: red }
em { color: blue }
Чтобы повлиять на свойства слова важный, которое в нашем примере находится внутри элемента EM, а тот, в свою очередь, внутри элемента H1, надо использовать следующий CSS-код:
h1 em { color: blue }
Обратите внимание, что в отличие от группировки при обращении к потомкам запятые не ставятся. Количество элементов, которые можно записать потомками, не ограничено. Например:
body div p span { color: green }
Если в документе встретится элемент SPAN, находящийся внутри элемента P, который, в свою очередь, находится внутри элемента DIV, то текст в элементе SPAN будет зеленым. В столь длинных описаниях элемент BODY можно опускать, так как все элементы находятся внутри него.
Если при разработке таблицы стилей вы еще точно не знаете, какой элемент будет размещаться внутри какого, можете воспользоваться символом *. Учтите, что с обеих сторон этого символа обязательно должны находиться пробелы.
Пример, представленный выше, можно переписать так:
body * span { color: green }
Нужно помнить, что текст будет зеленым, даже если элемент SPAN будет просто находиться внутри элемента DIV. Иными словами, звездочкой считается любой набор селекторов и их потомков.
Сестринские селекторы
Сестринскими называют элементы, которые идут друг за другом. Предположим, есть абзац, который имеет параметр class, заданный как first. Тогда, если за ним следует еще какой-то абзац, размер вертикального пространства между ними можно уменьшить, используя такой код:
p.first + p { margin-top: -5mm }
Создайте простую страницу и поэкспериментируйте с данным свойством, и вы быстро освоите, что такое сестринские селекторы в CSS.
Селекторы атрибутов
CSS позволяет создавать правила, сопоставляемые элементам с атрибутами, определенными в исходном коде HTML-документа. Селекторы атрибутов могут сопоставляться в следующих четырех случаях.
• [att] – если для элемента установлен атрибут att независимо от значения этого атрибута.
• [att=val] – когда значение атрибута att данного элемента в точности равно val.
• [att~=val] – если значением атрибута att данного элемента является список слов, разделенных пробелами, одно из которых в точности равно val.
• [att|=val] – когда значением атрибута att элемента является начинающийся со слова val список разделенных дефисом слов. Сопоставление всегда начинается с начала значения атрибута.
Чтобы хорошо разобраться с данным свойством, рассмотрите ряд примеров и подробных комментариев к ним.
Итак, следующее правило CSS сопоставляется всем элементам P, для которых описан атрибут align, независимо от его значения:
p[align] { color: blue; }
В следующем примере селектор, то есть правило CSS, сопоставляется всем элементам SPAN, у которых значение атрибута class в точности равно example:
span[class=example] { color: blue; }
Для обращения к нескольким атрибутам элемента или многократного обращения к одному и тому же атрибуту можно использовать несколько селекторов атрибутов. В следующем примере селектор сопоставляется всем элементам TABLE, у которых значение атрибута width в точности равно 90 %, а значение атрибута height в точности равно 50 %:
table[width="90%"][height="50%"] { color: blue; }
Следующие селекторы иллюстрируют различия между знаками = и ~=. Первый селектор будет сопоставляться, например, значению copyright copyleft copyall атрибута rel. Второй селектор будет сопоставляться только в том случае, если значение атрибута href равно http://www.yoursite.com/:
a[rel~="copyright"]
a[href="http://www.yoursite.com/"]
Следующее правило скрывает все элементы, атрибут lang которых имеет значение fr, то есть элементы с текстом на французском языке:
*[lang=fr] { display : none }
Следующее правило будет сопоставляться тем значениям атрибута lang, которые начинаются с ru, включая ru, ru-RU и ru-UA:
*[lang|="ru"] { color : red }
Селекторы классов
В таблицах стилей, используемых с HTML-документами, при сопоставлении атрибуту class вы можете использовать точку (.) как альтернативу условному обозначению ~=. Таким образом, два выражения HTML DIV. value и DIV [class ~=value] имеют одинаковый смысл. Значение атрибута должно находиться непосредственно после точки (.).
Например, для всех элементов с class~=test информацию о стиле можно определить следующим образом:
*.test { color: red } /* все элементы с class~=test */
или просто
.test { color: red } /* все элементы с class~=test */
Рассмотрим еще один пример. Следующее правило назначает стиль только элементу H1с class~=test:
h1.test { color: green } /* элемент H1 с class~=test */
Благодаря этому правилу в следующем примере при первом появлении элемент H1 не будет отображаться красным цветом, а при втором – будет:
<h1>Не зеленый цвет</h1>
<h1 class="test">Настоящий зеленый цвет</h1>
Для сопоставления подмножеству значений атрибута class перед каждым из них, записанных в произвольном порядке, следует поставить точку (.).
Например, следующее правило сопоставляется любому элементу P, атрибуту class которого в качестве значения назначен список разделенных пробелами значений, включающий слова test и marine:
p.test.marine { color: green }
Это правило сопоставляется, если, например, для элемента P задано class = «Test blue aqua marine», и не сопоставляется, если задано class = «test blue».
ID-селекторы
Атрибут ID языка документа позволяет назначать идентификатор одному экземпляру элемента в дереве HTML-документа. В CSS ID-селекторы сопоставляются экземпляру элемента в зависимости от его идентификатора. В CSS ID-селектор содержит символ #, непосредственно за которым следует значение атрибута ID.
Например, следующий ID-селектор сопоставляется элементу H1, значение атрибута ID которого равно chapter7:
h1#chapter7 { text-align: center }
В листинге 7.6 правило стиля сопоставляется элементу, у которого значение атрибута ID равно z98y. Иначе говоря, это правило будет сопоставляться элементу P.
Листинг 7.6. ID-селекторы<head>
<title>Глава 7</title>
<style type="text/css">
*#z98y { letter-spacing: 0.3em }
</style>
</head>
<body>
<p id=z98y>Текст абзаца</p>
</body>
Однако в примере из листинга 7.7 это правило стиля будет сопоставляться только элементу H1, значение атрибута ID которого равно z98y. В этом примере данное правило не сопоставляется элементу P.
Листинг 7.7. ID-селекторы<head>
<title>Глава 7</TITLE>
<style type="text/css">
h1#z98y { letter-spacing: 0.5em }
</style>
</head>
<body>
<p id=z98y>Текст абзаца</p>
</body>
Надо отметить, что ID-селекторы имеют более высокий приоритет, чем селекторы атрибутов. Например, в HTML-документе селектор #p123 более специфичен, чем [ID=p123].
7.4. Псевдоэлементы и псевдоклассы
В языке CSS стиль обычно прикрепляется к элементу в зависимости от его местонахождения в дереве HTML-документа. В большинстве случаев эта простая модель оказывается приемлемой, но все же иногда из-за структуры дерева документа она не позволяет реализовать некоторые желаемые результаты. Например, в HTML нет элемента, который бы указывал на первую строку абзаца, и поэтому нет простого селектора CSS, который бы мог указывать на нее.
В CSS вводится представление о псевдоэлементах и псевдоклассах, позволяющих осуществлять форматирование на основании информации, не включенной в дерево HTML-документа.
Сразу отмечу, что имена псевдоклассов и псевдоэлементов учитывают регистр.
Начнем изучение с псевдокласса: first-child.
Псевдокласс :first-child
Псевдокласс: first-child сопоставляется элементу, который является первым дочерним элементом другого элемента.
Со слов это тяжело понять, поэтому рассмотрите примеры, представленные в данном разделе, и вам все станет ясно.
В следующем примере селектор сопоставляется каждому элементу P, который является первым дочерним по отношению к элементу DIV. Проще говоря, это правило запрещает отступ для первого абзаца элемента DIV:
div > p:first-child { text-indent: 0 }
Данный селектор сопоставляется элементу P внутри DIV в следующем фрагменте:
<p>Последний P перед примечанием.
<div class="note">
<p>Первый P внутри примечания.
</div>
Он не сопоставляется элементу P в следующем фрагменте, так как он второй, а первый дочерний элемент DIV теперь – H2: