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

CSS селекторы

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

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

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

СелекторChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
[title | = home]4.02.09.63.17.012.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 селекторы