CSS селектор атрибута [attribute | = value]

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

Селектор атрибута [attribute | = value] выбирает все элементы с атрибутом, значение которого начинается с определённого слова (после него не должно быть никаких символов, за исключением дефиса, иначе выборка не будет произведена).

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

Селектор	Chrome	Firefox	Opera	Safari	IExplorer	Edge
[title \| = home]	4.0	2.0	9.6	3.1	7.0	12.0

CSS синтаксис:

[title | = home] {
блок объявлений;
}

Версия CSS

CSS2

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

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>CSS селектор атрибута (значение начинается с указанного слова)</title>
<style> 
[title | = home] {
color: green;
}
</head>
	<body>
		<p title = "home">Абзац title="home"</p> <!-- абзац будет стилизован (начинается с home) --> */
		<p title = "home-1" >Абзац title="home-1"</p> <!-- абзац будет стилизован (начинается с home после которого следует дефис) --> */
		<p title = "home home">Абзац title="home home"</p> 
		<p title = "not home">Абзац title="not home"</p>
		<p title = "homes" >Абзац title="homes"</p>
		<p title = "shome">Абзац title="shome"</p>
	</body>
</html>

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

Абзац title="home"

Абзац title="home-1"

Абзац title="home home"

Абзац title="not home"

Абзац title="homes"

Абзац title="shome"

Обратите внимание, что условие выборки будет соблюдено если атрибут содержит значение, которое содержит только указанное слово, или если после указанного слова сразу следует дефис (значение продолжается через дефис).

CSS селекторы