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

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

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 }

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

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

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

7. Унификация атрибутов

Из книги Базы данных: конспект лекций автора Автор неизвестен

7. Унификация атрибутов Если при миграции первичных ключей некоего родительского класса сущностей в один и тот же дочерний класс попадают совпадающие по смыслу атрибуты из разных родительских классов, то эти атрибуты необходимо «слить», т. е. необходимо провести так


Потребители атрибутов

Из книги Язык программирования С# 2005 и платформа .NET 2.0. [3-е издание] автора Троелсен Эндрю

Потребители атрибутов Как вы можете догадаться, в комплекте с .NET Framework 2.0 SDK поставляется множество утилит, предназначенных для работы с различными атрибутами. Даже компилятор C# (csc.exe) запрограммирован на проверку определенных атрибутов в процессе компиляции. Например,


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

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

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


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

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

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


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

Из книги Визуальное моделирование электронных схем в PSPICE автора Хайнеманн Роберт

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


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

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

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


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

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

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


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

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

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


1.3. Установка атрибутов

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

1.3. Установка атрибутов Для того чтобы ваша схема последовательной цепи точно соответствовала образцу на рис. 1.5, нужно дать сопротивлениям и источнику напряжения необходимые имена и указать их характеристики. При работе с редактором SCHEMATICS имена, значения и другие


7.3. Селекторы

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

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


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

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

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


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

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

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


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

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

Селекторы классов В таблицах стилей, используемых с HTML-документами, при сопоставлении атрибуту class вы можете использовать точку (.) как альтернативу условному обозначению ~=. Таким образом, два выражения HTML DIV. value и DIV [class ~=value] имеют одинаковый смысл. Значение атрибута


ID-селекторы

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

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


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

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

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