Книга: HTML, XHTML и CSS на 100%

Селекторы классов

Селекторы классов

В таблицах стилей, используемых с 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>Настоящий зеленый цвет</h1>

Для сопоставления подмножеству значений атрибута class перед каждым из них, записанных в произвольном порядке, следует поставить точку (.).

Например, следующее правило сопоставляется любому элементу P, атрибуту class которого в качестве значения назначен список разделенных пробелами значений, включающий слова test и marine:

p.test.marine { color: green }

Это правило сопоставляется, если, например, для элемента P задано class = «Test blue aqua marine», и не сопоставляется, если задано class = «test blue».

Оглавление книги