CSS селектор атрибута (с указанным значением)

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

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

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

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

CSS синтаксис:

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

Версия CSS

CSS2

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

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

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Селектор атрибута с указанным значением</title>
<style>
input[type=password] { /* выбираем все элементы <input>, атрибут type которых имеет значение password */
border: 1px dotted red; /* устанавливаем точечную границу размером 1 пиксель красного цвета */
} 
input[type=password]:focus { /* выбираем элемент <input>, атрибут type которого имеет значение password и который находится в фокусе */
border: 1px solid green; /* устанавливаем сплошную границу размером 1 пиксель зеленого цвета */
} 
</style>
</head>
	<body>
		<form>
			Login: <input type = "text" name = "login" placeholder = "Введите ваш логин"><br><br>
			Password: <input type = "password" name = "password" placeholder = "Введите ваш пароль"><br><br>
			<input type = "submit" name = "submit" value = "Далее">
		</form>
	</body>
</html>

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

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

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

Рассмотрим следующий пример в котором поле для поиска будет растягиваться, благодаря использованию селектора атрибутов (с указанным значением) и универсального свойства transition, которое задает все свойства эффекта перехода в одном объявлении:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Выдвигающийся поиск на CSS</title>
<style> 
input[type=text] {
width : 20%; /* устанавливаем ширину элемента input  с указанным атрибутом и значением (type="text") */
transition : width 500ms ease-in-out; /* Для свойства width мы устанавливаем длительность эффекта перехода равную 500 ms, при этом эффект перехода начинается с медленного старта и заканчивается медленно (ease-in-out) */
}
input[type=text]:focus {
width : 40%; /* устанавливаем ширину элемента input  с указанным атрибутом и значением (type="text") при получении фокуса */
}
</style>
</head>
	<body>
		Поиск: <input type = "text" name = "poisk" placeholder = "введите запрос">
	</body>
</html>

Выдвигающийся поиск на css (универсальное свойство transition и селектор атрибутов).

CSS селекторы