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

В CSS существует возможность обратиться к элементам html-документа по значению его атрибутов. Вы, конечно, уже знаете про ID и классы. Давайте взглянем на следующий html:

<h2 id="first-title" class="magical" rel="friend">David Walsh</h2>

У этого элемента три атрибута: id, class и rel. Обратиться к этому элементу в CSS вы можете либо по его идентификатору (#first-title), либо по имени класса (.magical). Однако знали ли вы, что вы также можете обратиться к нему, используя атрибут rel? Это и называется селекторы по атрибутам:

h2[rel=friend] { /* woohoo! */ }

Существует множество вариантов их использования. Давайте разберёмся более детально с различными опциями и попытаемся придумать сценарии использования атрибутов в реальной жизни.

[rel=external]
Атрибут точно соответствует заданному значению

В приведённом выше примере, атрибут элемента h2 был равен "friend". Селектор, который мы написали ссылался на него, поскольку значение атрибута точно равно "friend". Именно точное. Давайте посмотрим на другой пример:

<h1 rel="external">Attribute Equals</h1>
h1[rel=external] { color: red; }

Более реальный пример - стилизация блогролла (blogroll). Скажем у вас есть список ссылок на дружественные сайты:

<a href="http://perishablepress.com">Jeff Starr</a> <a href="http://davidwalsh.name">David Walsh</a> <a href="http://accidentalninja.net/">Richard Felix</a>

И вы хотите задать каждой ссылке свой стиль. Традиционный подход состоит в том, что каждой ссылке указывается класс, но этот подход требует дополнительной разметки. Другой способ - это использование псевдоселектора nth-child. Однако этот подход требует определённого порядка элементов. Эта проблема идеально подходит для применения селекторов по атрибутам, поскольку ссылки уже являются уникальными.

a[href=http://perishablepress.com] { color: red; }

Я уверен, что наиболее часто этот тип селектора используется для элементов input (text, radio и т.п.). Все эти элементы сильно отличаются друг от друга, и писать что-нибудь типа input { padding: 10px; } в большинстве случаев не лучшая идея. Гораздо чаще используется следующая запись:

input[type=text] { padding: 3px; } input[type=radio] { float: left; }

Это единственный способ стилизовать элементы input без дополнительной разметки и всяческих ухищрений.

[rel*=external]
Атрибут содержит заданное значение.

Теперь начинаются более интересные вещи. Знаку равенства в селекторе по атрибуту может предшествовать другой знак, который меняет назначение его использования. Например, "*=" означает "заданное значение может находиться где угодно в значении указанного атрибута". Взгляните на следующий пример:

<h1 rel="xxxexternalxxx">Attribute Contains</h1>
h1[rel*=external] { color: red; }

Не забывайте, что идентификаторы и классы - это тоже атрибуты и вы можете их в селекторах по атрибутам. Итак, давайте предположим, что вы пишете CSS для сайта, в котором вы не имеете доступа к разметке, а неопытный разработчик оставил вам такое:

<div id="post_1"></div> <div id="post_two"></div> <div id="third_post"></div>

Вы можете подсветить все эти элементы следующим образом:

div[id*=post] { color: red; }

[rel^=external]
Атрибут начинается с заданного значения

<h1 rel="external-link yep">Attribute Begins</h1>
h1[rel^=external] { color: red; }

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

a[href^=http://perishablepress.com] { color: red; }

[rel$=external]
Атрибут заканчивается на заданное значение

Если есть возможность сделать выбор по началу значения атрибута, то почему не быть и обратной возможности?

<h1 rel="friend external">Attribute Ends</h1>
h1[rel$=external] { color: red; }

Честно говоря, я не смог найти реального примера применения такого вида селектора. Но я верю что он существует. Предположим, что вам необходимо подсветить ссылки, которые заканчиваются не значимыми символами:

a[href$=#], a[href$=?] { color: red; }

[rel~=external]
Атрибут находится в списке, разделённом пробелами

Как вы уже знаете, вы можете указать несколько классов стилей для одного элемента. И если вы делаете именно так, то вы можете использовать имя класса для доступа к элементу в CSS. В случае использования селекторов по атрибуту, не всё так просто. Если атрибуту rel присвоено несколько значений (разделённых пробелами), то вам необходимо использовать "~=";

<h1 rel="friend external sandwich">Attribute Space Separated</h1>
h1[rel~=external] { color: red; }

Вы можете подумать, почему бы нам не использовать в этом случае "*=" ? Действительно, такой вариант использования более гибок, однако он может быть слишком гибок. Рассматриваемый селектор требует, чтобы значение отделялось пробелом, а "*=" - нет. Таким образом, если у вас есть два элемента (один с rel=home friend-link, а второй с rel=home friend link), то вам необходимо использовать селектор для случая с пробелами, чтобы выбрать только второй элемент.

[rel|=external]
Атрибут находится в списке, разделённом дефисами

Список, разделённый дефисами очень похож на описанный выше список разделённый пробелами. Но опять же есть свои особенности перед использованием селектора с "*=".

<h1 rel="friend-external-sandwich">Attribute Dash Separated</h1>
h1[rel|=external] { color: red; }

[title=one][rel^=external]
Соответствие по нескольким атрибутам

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

<h1 rel="handsome" title="Important note">Multiple Attributes</h1>
h1[rel=handsome][title^=Important] { color: red; }

Поддержка браузерами

Каждый пример, приведённый выше, работает во всех современных браузерах: Safari, Chrome, Firefox, Opera и IE7 и выше.

Опубликовано: 20.03.2010 Просмотров 66742 Ссылка на оригинал Tweet it!
11 comments  

Paulus

2010.03.21 11:04

 Плохо, что не работает в ie6. Поэтому все-равно приходится создавать класс или id, либо надо лишать возможности посетителей использовать ie6. :) Вообще полезная статья. Спасибо.
 

Чистяков Денис

2010.03.24 11:44

 Спасибо за такой полный обзор, про совсем экзотический: [rel|=external], при чем про него по моему даже jQuery не знает )
@ Paulus
То что не работает в старичке IE6 наверно не так критично, процент его все ниже и ниже, да и применяться это будет мне кажется в каких то "второстепенных" вещах, подсветить там внешнии ссылки или какие то определенные пункты меню отдельно, или немного переоформить элементы формы. Не думаю что это будет критично и заметно пользователям 6-ки )
 

ikokostya

2010.06.12 14:19

 [rel|=external] есть в jQuery http://api.jquery.com/attribute-contains-prefix-selector/
 

Hello_O

2011.03.27 13:08

 Ошареть).. полезная вещь!) Особенно мне сейчас..
Отличный сайт)..
Как-то не много страшно за кроссбраузерность.. пол сайта держать на селекторах на атрибут..
 

SiPlus

2011.04.14 21:11

 А как через CSS установить атрибут?
 

basilkot

2011.04.14 21:15

  • Никак. Атрибут - это часть html-разметки, а CSS - это таблица стилей. Повлиять на разметку HTML из таблицы стилей невозможно, да и нелогично.

Катя

2011.07.12 16:05

 ого, супер, я знала и видела подобное, но тут все так четко и ясно расписано, полезная вещь, спасибо)
 

Br0nde

2011.10.10 09:42

 Для селектора:
[rel$=external]

есть наглядное применение:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Селекторы атрибутов</title>
<style type="text/css">
A[href$=".ru"] { /* Если ссылка заканчивается на .ru */
background: url("http://htmlbook.ru/example/images/ru.png") no-repeat 0 6px; /* Добавляем фоновый рисунок */
padding-left: 12px; /* Смещаем текст вправо */
}
A[href$=".com"] { /* Если ссылка заканчивается на .com */
background: url("images/http://htmlbook.ru/example/images/com.png") no-repeat 0 6px;
padding-left: 12px;
}
</style>
</head>
<body>

<p><a href="http://www.yandex.com">Yandex.Com</a> |
<a href="http://www.yandex.ru">Yandex.Ru</a></p>

</body>
</html>
 

Не представился

2013.05.15 21:16

 спасибо!
 

serzhei

2013.08.30 22:01

 спасибо, оформление понравилось)
 

Саня

2015.10.05 01:38

 Статья - чемпион, обалдел от увиденного!!!
 

Иван

2015.12.15 16:40

 господи боже мойййй! *= - сказка!
 

Оставить после себя комментарий

user

2016.11.19

Отправить сообщение:

Email

Сообщение

Бонус на первый депозит в слоте Грейт Пигсби Мегавейс дарит тебе онлайн казино Вавада! Переходи по ссылке и получай 100 бесплатных вращений на депозит до 1000$!