CSS :: Селектор по атрибуту

Селектор по атрибуту (от англ. attribute selector – селектор по атрибуту) выбирает элементы по значению атрибутов, а сам селектор берется в квадратные скобки. Если селектор применяется к конкретному типу элементов, то он пишется сразу после имени элемента без пробела.

Данный тип селекторов обладает мощным инструментом поиска по шаблону, например:

[атрибут] – выбираются все элементы, у которых присутствует такой атрибут вне зависимости от его значения, например, [title] {блок объявлений};
[атрибут="значение"] – выбираются все элементы, у которых данный атрибут имеет указанное в селекторе значение (здесь и далее учитывается также и регистр символов!), например, [title="Оранжевый цвет текста"] {блок объявлений};
[атрибут^="значение"] – выбираются все элементы, у которых значение данного атрибута начинается на подстроку (фрагмент строки), указанную в селекторе, например, [title^="Красный цв"] {блок объявлений};
[атрибут$="значение"] – выбираются все элементы, у которых значение данного атрибута заканчинается на подстроку, указанную в селекторе, например, [title$="кста!"] {блок объявлений};
[атрибут~="значение"] – выбираются все элементы, у которых значение данного атрибута содержит подстроку, отделенную пробелами от остальной части, или отдельное слово и указанную в селекторе, например, [title~="синий"] {блок объявлений};
[атрибут*="значение"] – выбираются все элементы, у которых значение данного атрибута содержит подстроку, указанную в селекторе, например, [title*="олетов"] {блок объявлений}.

Синтаксис

[<атрибут>] {блок объявлений}

[<атрибут>="<значение>"] {блок объявлений}

[<атрибут>^="<значение>"] {блок объявлений}

[<атрибут>$="<значение>"] {блок объявлений}

[<атрибут>~="<значение>"] {блок объявлений}

[<атрибут>*="<значение>"] {блок объявлений}

Ссылки

Официальный сайт W3C: https://www.w3.org/TR/selectors-3/#attribute-selectors

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/Attribute_selectors

Примеры

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №1</title>

	<style>
		
	/* Селектор по атрибуту выбирает элементы   */
	/* в соответствии с заданным шаблоном */
		
	/* Этот стиль будет применен ко всем элементам, */	
	/* у которых задан любой атрибут title */	
	[title]{
	font-weight: bold;			 
	}
			
	/* Стиль будет применен ко всем элементам, */	
	/* у которых атрибут title="Оранжевый цвет текста" */	
	[title="Оранжевый цвет текста"]{
	color: orange;			 
	}
	
	/* А этот стиль будет применен ко всем элементам, у которых */	
	/* атрибут title начинается на подстроку "Красный цв" */	
	[title^="Красный цв"]{
	color: red;			 
	}

	/* Этот стиль будет применен ко всем элементам, у которых */	
	/* атрибут title заканчинается на подстроку "кста!" */	
	[title$="кста!"]{
	color: green;			 
	}
	
	/* Стиль будет применен ко всем элементам, у которых */	
	/* атрибут title содержит подстроку "синий", */	
	/* отделенную пробелами от остального содержимого */
	[title~="синий"]{
	color: blue;			 
	}
	
	/* А этот стиль будет применен ко всем элементам, у */	
	/* которых атрибут title содержит подстроку "олетов" */	
	[title*="олетов"]{
	color: violet;			 
	}	
		
	</style>
	
</head>
<body>
	
	<p>
		Для этого абзаца наши селекторы не применяется.
	</p>

	<p title="Любой title">
		[title]{font-weight: bold;}
	</p>

	<p title="Оранжевый цвет текста">
		[title="Оранжевый цвет текста"]{color: orange;}
	</p>

	<p title="Красный цвет текста">
		[title^="Красный цв"]{color: red;}
	</p>

	<p title="Зеленый цвет текста!">
		[title$="кста!"]{color: green;}
	</p>

	<p title="Очень синий цвет текста">
		[title~="синий"]{color: blue;}
	</p>

	<p title="Фиолетовый цвет текста">
		[title*="олетов"]{color: violet;}
	</p>
	
</body>
</html>

Пример №1