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

CSS позволяет создавать правила, сопоставляемые тегам с атрибутами, определе ными в исходном коде HTML-документа. Селекторы атрибутов могут сопостаЙ ляться в четырех случаях:

□ [att] — если для элемента установлен атрибут att, независимо от значен»
этого атрибута;

□ [att=val] — если значение атрибута att данного элемента в точности равнС

val;

□ [att~=val ] — если значением атрибута att данного элемента является списо|
слов, разделенных пробелами, одно из которых равно val;

□ [ att | =val ] — если значением атрибута att элемента является список разде-|
ленных дефисом слов, начинающийся со слова val. Сопоставление всегда на-:
чинается с начала значения атрибута.

Чтобы разобраться с этим свойством, рассмотрим несколько примеров.

- Правило CSS сопоставляется всем элементам тега <Р>, для которых описыва­ется атрибут align, независимо от его значения:

p[align] { color: blue;}

- Селектор, то есть правило CSS, сопоставляется всем элементам SPAN, у которых
значение атрибута class равно example:

SPAN[class=example] { color: blue; }

Это значит, что это правило не описывает сам класс и тег <Р> с этим классом не будет отображать синий цвет.

□ Для обращения к нескольким атрибутам элемента или для многократного обращения к одному и тому же атрибуту можно использовать несколько селекторов
атрибутов. В этом примере селектор сопоставляется всем элементам TABLE, у ко­
торых значение атрибута width равно 90%, а значение атрибута height — 50%:
TABLE[width="90r][height="50l"] { color: blue; }

□ Следующие селекторы иллюстрируют различия между «~=» и «=». Первый
селектор сопоставляется значениям right или left атрибута align. Второй
селектор будет сопоставляться только в том случае, если значение атрибута
href равно http: //www. yoursite. com/:

□ P[align~="right left"]

□ A[href="https://www.yoursite.com/"]

□ Приведенное ниже правило скрывает все элементы, атрибут lang которых
имеет значение f r, то есть элементы с текстом на французском языке:

*[LANG=fr] { display: none }

CI Следующее правило сопоставляется тем значениям атрибута lang, которые
начинается со значения ru, включая ru, ru-RU и ru-UA:
*[LANG|="ru"] { color: red }

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

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

например, для всех элементов со значением class=test информацию о стиле
можно определить следующим образом:

*.test { color: red } /* все элементы с class=test */ или сокращенно:

.test { color: red } /* все элементы с class=test */

Рассмотрим еще один пример. Следующее правило назначает стиль только элементу H1 со значением class=test:

HI.test { color: green } /* элемент HI с class=test */

Благодаря этому правилу в следующем примере при первом появлении элемент H1 не будет отображаться красным цветом, а при втором появлении будет:

<Н1>Не зеленый цвет</Н1>

<Н1 cl ass="test">HacTOflLqMii зеленый цвет</Н1>

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

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

P.test.marine { color: green }

Это правило сопоставляется, если, например, для тега <Р> задается атрибут class="Test blue aqua marine", и не сопоставляется, если задается атрибут

class="test blue"