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

CSS селекторы

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

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

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

СелекторChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
[attribute^=value]css34.03.59.63.27.012.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 селекторы