Выбор конкретного атрибута

Последний тип селекторов атрибутов, селектор конкретного атрибута (particular attribute selector), проще показать, чем описать. Рассмотрим следующее правило:

*[lang|="en"] {color: white;}

Это правило будет выбирать любой элемент, чей атрибут lang эквивалентен en или начинается с en-. Поэтому первые три элемента следующего примера разметки будут выбраны, а последние два – нет:

Hello!


Greetings!


G'day!

Bonjour!


Jrooana!



В общем, форма [атрибут|="значение"] может применяться для любого атрибута и его значений. Скажем, в HTML-документе есть наборы рисунков, каждый из которых хранится в файле с именем, например figure-1.gif или figure-3.jpg. Все эти изображения можно выбрать посредством следующего селектора:

img[src|="figure"] {border: 1px solid gray;}

Чаще всего этот тип селекторов атрибутов применяется для сопоставления значений языков, как будет показано в этой главе позже.

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

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

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