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

Предыдущая статья Селектор идентификатора.

Описание селектора:

• Выполняемая задача — выбор всех элементов по наличию или значению заданного атрибута.
• Обозначение — запись, определяющая тип селектора в квадратных скобках.

Важно! IE6 не понимает этот селектор.

Подробнее про селектор атрибутов

Фактически, и селектор класса, и селектор идентификатора являются частными случаями селектора атрибутов (так как class и id — это просто атрибуты, значения которых мы используем, чтобы найти какие-то элементы).

CSS2 предоставляет 4 варианта селекторов атрибутов. Рассмотрим их по порядку (новые возможности CSS3 см. ниже).

Выбор по наличию атрибута

Выбираем все элементы, у которых существует (задан в HTML) данный атрибут.

Синтаксис:

Element[attrName]

Тут и далее Element, это какой-либо простой селектор (div, p, .header, div#popup, * и т.д.). Отсутствие в коде Element обозначает, что в этом месте стоит универсальный селектор, который, в этой ситуации можно опустить.

Пример. Выделим жирным шрифтом все элементы, для которых задана всплывающая подсказка:

[title] {
	font-weight: bold;
} 

Выбор по точному значению атрибута

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

Синтаксис:

Element[attrName=attrValue]

Пример. Зададим цвет фона только для тех input, значение атрибута type которых в точности равно "submit" (для кнопки отправки формы):

input[type="submit"] {
	background: #0f0;
} 

<!--Будет выбран элемент:-->
<input type="submit" value="Отправить"/>
<!--Не будет выбран элемент:-->
<input type="text" value="Введите e-mail"/>

Выбор по частичному значению атрибута

Выбираем все элементы, заданный атрибут которых в перечне значений имеет определенное слово.

Синтаксис:

Element[attrName~=attrValue]

Пример. Зададим обтекание для тех элементов div, в перечне значений атрибута class, которых присутствует "sideBar" (вот это-то и есть, фактически, селектор класса):

div[class~="sideBar"] {
	float: left;
} 

<!--Будут выбраны элементы:-->
<div class="sideBar"><div>
<div class="sideBar userBar"><div>
<div class="contentPanel sideBar"><div>
<!--Не будет выбран элемент:-->
<div class="sideBarInner"><div>

Выбор по конкретным значениям атрибутов

Выбираем все элементы, заданный атрибут которых равен определенному значению или начинается с этого значения, после которого идет дефис.

Синтаксис:

Element[attrName|=attrValue]

Пример. Зададим стили для всех элементов, язык которых задан в атрибутах, как английский (en, en-us, en-gb, en-au и т.д.):

[lang|="en"] {
	/* какие-то стили */
} 

<!--Будут выбраны элементы:-->
<div lang="en"><div>
<div lang="en-us"><div>
<p lang="en-au"><p>
<!--Не будут выбраны элементы:-->
<div lang="ru"><div>
<div lang="english"><div>

Новые селекторы атрибутов в CSS3

CSS3 несколько расширяет возможности выбора по конкретным значениям атрибутов и дополняет их еще тремя вариантами.

Выбор по началу значения атрибута

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

Синтаксис:

Element[attrName^=attrValue]

Пример. Зададим стили для всех элементов, атрибут title которых начинается со слова "Hint":

[title^="Hint"] {
	/* какие-то стили */
} 

<!--Будут выбраны элементы:-->
<div title="Hint. Did you know that…"><div>
<div title="Hint…"><div>
<span title="Hinting…"><span>
<!--Не будет выбран элемент:-->
<div title="Important Hint…"><div>

Выбор по окончанию значения атрибута

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

Синтаксис:

Element[attrName$=attrValue]

Пример. Зададим стили для всех элементов img, которые ссылаются на гифки:

img[src$=".gif"] {
	/* какие-то стили */
} 

<!--Будет выбран элемент:-->
<img src="/images/user.gif" height="64px" width="64px" alt="аватарка"/>
<!--Не будет выбран элемент:-->
<img src="/images/user.png" height="64px" width="64px" alt="аватарка"/>

Выбор по подстроке в значении атрибута

Выбираем все элементы, заданный атрибут которых содержит определенную подстроку.

Синтаксис:

Element[attrName*=attrValue]

Пример. Зададим стили для всех ссылок, в адресах которых есть подстрока "xiper":

a[href*="xiper"] {
	/* какие-то стили */
} 

<!--Будут выбраны элементы:-->
<a href="">Главная</a>
<a href="xiper">Это тоже главная</a>
<a href="">Уроки CSS</a>
<!--Не будет выбран элемент:-->
<a href="xipernet">Ошибка в адресе!</a>

Группировка

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

img[width][height][alt] {
	/*
	эти стили применятся только к изображениям, у которых есть все три перечисленных атрибута
	*/
}
a[title][href*="xiper"] {
	/*
	эти стили применятся только к ссылкам, в адресах которых есть подстрока "xiper" и для которых задан атрибут title
	*/
} 

Область применения

Перечисленные выше селекторы атрибутов (включая CSS3) поддерживаются всеми популярными браузерами. Единственное исключение — IE6.

Конечно, применять на веб-странице атрибуты, задающие оформление — это, буквально, технология прошлого тысячелетия (так верстали в начале 90-х). Сейчас вместо таких атрибутов пользуются соответствующими CSS-свойствами. Тем не менее, целый ряд атрибутов вполне заслужил свое место в твоем HTML. А некоторые из них просто являются обязательными (познакомиться подробнее с перечнем семантических атрибутов). В этом случае, использование селектора атрибутов позволяет обойтись без лишних классов и, таким образом, упростить HTML-код.

Так или иначе, для IE6 (если ты все еще поддерживаешь старого Осла), потребуется альтернативное решение, скорее всего, с использованием expression. Пример такого решения (а заодно и пример использования селектора атрибутов очень в тему) можно посмотреть в статье Блочная верстка форм.

Следующая статья — Селекторы псевдоклассов.