HTML, XHTML и CSS на 100%, Квинт Игорь

HTML, XHTML и CSS на 100%

на обложку

Квинт Игорь

Шрифт:

Следующее правило скрывает все элементы, атрибут 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>

*#z98y { letter-spacing: 0.3em }

</style>

</head>

<body>

<p id=z98y>Текст

абзаца

</body>

Однако в примере из листинга 7.7 это правило стиля будет сопоставляться только элементу H1, значение атрибута ID которого равно z98y. В этом примере данное правило не сопоставляется элементу P.

Листинг 7.7. ID-селекторы

<head>

<title>Глава 7</TITLE>

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 перед примечанием.

Первый P внутри примечания.

</div>

Он не сопоставляется элементу P в следующем фрагменте, так как он второй, а первый дочерний элемент DIV теперь – H2:

Последний P перед примечанием.

<h2>Примечание</H2>

Первый P внутри примечания.

</div>