HTML, XHTML и CSS на 100%
Шрифт:
Следующее правило скрывает все элементы, атрибут lang которых имеет значение fr, то есть элементы с текстом на французском языке:
*[lang=fr] { display : none }
Следующее правило будет сопоставляться тем значениям атрибута lang, которые начинаются с ru, включая ru, ru-RU и ru-UA:
*[lang|="ru"] { color : red }
Селекторы классов
В таблицах стилей, используемых с HTML-документами, при
Например, для всех элементов с 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.
<head>
<title>Глава 7</title>
<style type="text/css">
*#z98y { letter-spacing: 0.3em }
</style>
</head>
<body>
<p id=z98y>Текст
</body>
Однако в примере из листинга 7.7 это правило стиля будет сопоставляться только элементу H1, значение атрибута ID которого равно z98y. В этом примере данное правило не сопоставляется элементу P.
<head>
<title>Глава 7</TITLE>
<style type="text/css">
h1#z98y { letter-spacing: 0.5em }
</style>
</head>
<body>
<p id=z98y>Текст абзаца
</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 перед примечанием.
<div class="note">
Первый P внутри примечания.
</div>
Он не сопоставляется элементу P в следующем фрагменте, так как он второй, а первый дочерний элемент DIV теперь – H2:
Последний P перед примечанием.
<div class="note">
<h2>Примечание</H2>
Первый P внутри примечания.
</div>