CSS селектор атрибутов

Значение и применение

С помощью селектора атрибутов вы можете выбрать те элементы страницы, которые имеют конкретные (определенные) атрибуты.

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

Селектор	Chrome	Firefox	Opera	Safari	IExplorer	Edge
[attribute]	4.0	2.0	9.6	3.1	7.0	12.0

CSS синтаксис:

[attribute] {
блок объявлений;
}

Версия CSS

CSS2

Пример использования

Давайте рассмотрим следующий селектор и попробуем разобраться, что он значит:

img[title] { /* выбирает все элементы <img> с атрибутом title */
блок объявлений;
}

img в данной случае аналогичен селектору типа, т.е выбирает все элементы <img>, а в квадратных скобках мы задаем имя атрибута этого элемента. То есть происходит выборка всех элементов данного типа с определённым атрибутом, в нашем примере это глобальный атрибут title, определяющий текстовую подсказку о содержимом элемента.

Вы можете использовать селекторы атрибутов не только напрямую к элементам, но и использовать их с прочими селекторами, например с селекторами класса или id селекторами:

.main[title] { /* выбирает все элементы с классом main и атрибутом title */
блок объявлений;
} 
#main[title] { /* выбирает элемент с идентификатором main и атрибутом title */
блок объявлений;
}

В данном случае первый селектор выбирает все элементы, которые имеют значение глобального атрибута class равным main и глобальным атрибутом title. Второй селектор выбирает элемент, который имеют значение глобального атрибута id равным main и глобальным атрибутом title.

Рассмотрим следующий пример в котором, мы выберем все элементы <img>, у которых присутствует атрибут alt, который задает альтернативный текст для изображения.

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Пример использования селектора атрибутов</title>
<style>
img { /* выбираем все изображения */
width: 100px;  /* задаем ширину элемента */
height: 100px;  /* задаем высоту элемента */
}
img[alt] { /* выбираем все изображения с атрибутом alt */
border: 1px solid green; /* устанавливаем сплошную границу размером 1 пиксель зеленого цвета */
} 
</style>
</head>
	<body>
		<img src = "nich.jpg" alt = "nich">
		<img src = "nich.jpg"> <!-- элемент не будет стилизован (отсутствует атрибут alt) -->
		<img src = "nich.jpg" alt = "nich">
	</body>
</html>

Результат нашего примера:

Пример использования селектора атрибутов.

CSS селекторы