Простой выбор атрибутов

Для того чтобы выбрать элементы с определенным атрибутом независимо от значения этого атрибута, можно обратиться к простому селектору атрибутов. Например, чтобы выбрать все элементы h1, имеющие атрибут class с любым значением, и сделать их текст серебряным, на пишите:

h1[class] {color: silver;}

Итак, следующая разметка:

Hello


Serenity


Fooling



Эта тактика очень полезна в XML-документах, поскольку в языках XML имеется тенденция присваивать элементам и атрибутам имена, соответствующие их назначению. Рассмотрим язык XML, применяемый для описания планет Солнечной системы (назовем его PlanetML). Для того чтобы выбрать все элементы planet с атрибутом moons (луны) и выделить их полужирным шрифтом, обращая внимание на любую планету, имеющую естественные спутники, можно написать:

planet[moons] {font-weight: bold;}

Это приведет к тому, что в следующем фрагменте разметки текст второго и третьего элементов, но не первого, будет выделен полужирным шрифтом:

Venus
Earth
Mars

В HTML-документах этот подход может быть реализован творчески.


Например, можно выделить все изображения, имеющие атрибут alt, отметив таким образом изображения, оформленные правильно:

img[alt] {border: 3px solid red;}

Этот конкретный пример полезен больше для диагностики, т. е. для определения правильности оформления изображений, чем для целей разработки. Для того чтобы выделить полужирным шрифтом элементы, содержащие какую-либо информацию в атрибуте title, которую большинство броузеров отображает как «всплывающую подсказку» при прохождении курсора над элементом, можно написать:

*[title] {font-weight: bold;}

Аналогичным образом можно оформить только те элементы a, в которых есть атрибут href. Также можно осуществлять выбор на основании наличия нескольких атрибутов. Это делается путем простого объединения селекторов атрибутов. Например, чтобы выделить полужирным шрифтом текст любой гиперссылки HTML, которая имеет и атрибут href, и атрибут title, можно написать:

a[href][title] {font-weight: bold;}

При этом полужирным шрифтом будет выделена первая ссылка следующей разметки, но не вторая или третья:

(a href="http://www.1111.org/" title="W3C Home">W3C(/a)

(a href="http://www.2222.org">Standards Info(/a)>

(a title="Not a link">dead.letter(/a)


Оцените статью: (0 голосов)
0 5 0

Статьи из раздела CSS на эту тему:
Выбор дочерних элементов
Выбор конкретного атрибута
Выбор между селектором классов и селектором идентификаторов
Выбор на основании конкретного значения атрибута
Выбор первого дочернего элемента

Вернуться в раздел: CSS / 2. Селекторы