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

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

В таблицах стилей, используемых с 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».

Поделитесь на страничке

Следующая глава >

Похожие главы из других книг

Оболочка из классов для OLE

Из книги Применение Windows API автора Легалов А И

Оболочка из классов для OLE Рационализация OLEПеревод А. И. ЛегаловаАнглоязычный оригинал находится на сервере компании Reliable


Роль классов

Из книги Основы объектно-ориентированного программирования автора Мейер Бертран

Роль классов Затратив немного времени на устранение абсурдных, но распространенных и вредных заблуждений, можно вернуться к рассмотрению центральных свойств классов и выяснить, в частности, почему они столь важны в объектной технологии.Для понимания ОО-подхода


ГЛАВА 13. Специальные селекторы

Из книги HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов. автора Дронов Владимир

ГЛАВА 13. Специальные селекторы В предыдущих главах части II мы изучали, в основном, атрибуты стилей CSS. Их очень много; одни задают параметры шрифта, другие — параметры фона, третьи — параметры отступов и пр. Можно сказать, что нет такого параметра, влияющего на


Селекторы по атрибутам тега

Из книги HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов автора Дронов Владимир

Селекторы по атрибутам тега Селекторы по атрибутам тега — это специальные селекторы, привязывающие стиль к тегу на основании, присутствует ли в нем определенный атрибут или имеет ли он определенное значение.Селекторы по атрибутам тега используются не сами по себе, а


Специальные селекторы CSS, предназначенные для работы с элементами управления

Из книги Операционная система UNIX автора Робачевский Андрей М.

Специальные селекторы CSS, предназначенные для работы с элементами управления Язык CSS предоставляет несколько специальных селекторов, с помощью которых можно неявно привязать стиль к элементам управления на основе их состояния. Все они относятся к структурным


ГЛАВА 13. Специальные селекторы 

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

ГЛАВА 13. Специальные селекторы  В предыдущих главах части II мы изучали, в основном, атрибуты стилей CSS. Их очень много; одни задают параметры шрифта, другие — параметры фона, третьи — параметры отступов и пр. Можно сказать, что нет такого параметра, влияющего на


Селекторы по атрибутам тега

Из книги Описание языка PascalABC.NET автора Коллектив РуБоард

Селекторы по атрибутам тега Селекторы по атрибутам тега — это специальные селекторы, привязывающие стиль к тегу на основании, присутствует ли в нем определенный атрибут или имеет ли он определенное значение.Селекторы по атрибутам тега используются не сами по себе, а


Специальные селекторы CSS, предназначенные для работы с элементами управления

Из книги автора

Специальные селекторы CSS, предназначенные для работы с элементами управления Язык CSS предоставляет несколько специальных селекторов, с помощью которых можно неявно привязать стиль к элементам управления на основе их состояния. Все они относятся к структурным


7.3. Селекторы

Из книги автора

7.3. Селекторы Селектором в CSS для простоты понимания будем считать название элемента, для которого задаются свойства. Теперь рассмотрим, как можно задать одни и те же свойства разным элементам


Селекторы потомков

Из книги автора

Селекторы потомков Иногда необходимо задать свойства элементу, который располагается непосредственно внутри какого-то другого элемента, то есть является так называемым потомком. Селектор потомков состоит из двух и более селекторов, разделенных пробелом.Допустим,


Сестринские селекторы

Из книги автора

Сестринские селекторы Сестринскими называют элементы, которые идут друг за другом. Предположим, есть абзац, который имеет параметр class, заданный как first. Тогда, если за ним следует еще какой-то абзац, размер вертикального пространства между ними можно уменьшить, используя


Селекторы атрибутов

Из книги автора

Селекторы атрибутов CSS позволяет создавать правила, сопоставляемые элементам с атрибутами, определенными в исходном коде HTML-документа. Селекторы атрибутов могут сопоставляться в следующих четырех случаях.• [att] – если для элемента установлен атрибут att независимо от


ID-селекторы

Из книги автора

ID-селекторы Атрибут ID языка документа позволяет назначать идентификатор одному экземпляру элемента в дереве HTML-документа. В CSS ID-селекторы сопоставляются экземпляру элемента в зависимости от его идентификатора. В CSS ID-селектор содержит символ #, непосредственно за


Селекторы столбцов

Из книги автора

Селекторы столбцов В CSS ячейки таблицы могут принадлежать одному из двух типов групп: строкам или столбцам. В HTML ячейки являются наследующими элементами строк, а не столбцов. Тем не менее на некоторые свойства ячеек оказывают влияние свойства столбцов.Ниже приведен


Диаграмма классов

Из книги автора

Диаграмма классов На рисунке приведена диаграмма классов модуля ABCObjects. Класс SpriteABC описан в модуле ABCSprites, однако, приведен на диаграмме как один из