CSS селектор атрибута (значение заканчивается определёнными символами)

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

Селектор [attribute$ = value] css3 выбирает каждый элемент, значение атрибута которого заканчивается указанным значением.

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

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

CSS синтаксис:

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

Версия CSS

CSS3

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

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

Давайте рассмотрим пример в котором мы выберем гиперссылки, которые заканчиваются определённым разрешением файла.

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Селектор атрибута со значением, заканчивающимся определёнными символами</title>
<style> 
a[href$=".doc"] { /* выбираем все элементы с атрибутом href, значение которого закачивается на .doc */
color: green; /* устанавливаем цвет текста */
background-color: lightblue; /* устанавливаем цвет заднего фона */
}
a[href$=".mp3"] { /* выбираем все элементы с атрибутом href, значение которого закачивается на .mp3 */
background-color: khaki; /* устанавливаем цвет заднего фона */
}
</style>
</head>
	<body>
		<a href ="http:/path.to/test.doc">Инструкция</a><br>
		<a href ="http:/path.to/test.mp3">Песня про зайцев</a>
	</body>
</html>

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

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

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

CSS селекторы