Категория > Вёрстка > Селекторы по атрибутам в CSS - «Верстка»

Селекторы по атрибутам в CSS - «Верстка»


20-03-2010, 13:00. Автор: Юлий


В 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! */
}


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



h4 {
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 18px;
color: red;
text-align: center;
}
h4>span{
font-size: 36px;
color: black;
}
h4>span>span{
color: red;
}

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



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


<h1 rel="external">Attribute Equals</h1>

h1[rel=external] { color: red; }


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


Jeff Starr
David Walsh
Richard Felix


И вы хотите задать каждой ссылке свой стиль. Традиционный подход состоит в том, что каждой ссылке указывается класс, но этот
подход требует дополнительной разметки. Другой способ - это использование псевдоселектора 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 и выше.


Перейти обратно к новости