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

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

Селектор [attribute ^ = value] применяет заданный стиль к элементам, атрибут которых начинается с определённого значения.

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

Селектор	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

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

Давайте рассмотрим пример в котором выберем на странице все абсолютные адреса внешних гиперссылок, которые начинаются с http://, либо https://:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Селектор атрибута со значением, начинающимся с определённых символов</title>
<style> 
a[href ^ = "http://"], a[href ^ = "https://"] { /* групповой селектор атрибутов */
color: orange; /* устанавливаем цвет текста */
}
</style>
</head>
	<body>
		<p>Сайт компании доступен как по протоколу http, так и по протоколу https:</p>
			<ul>
				<li><a href = "http://сайткомпании.ссср">Адрес с http</a></li>
				<li><a href = "https://сайткомпании.ссср">Адрес с https</a></li>
			</ul>
		<p>Может вы настроите перенаправление?</p>
	</body>
</html>

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

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

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

CSS селекторы