CSS селектор атрибута (содержащий определённое значение)

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

Селектор используется для выбора элементов со значением атрибута, содержащего определенное слово.

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

Селектор	Chrome	Firefox	Opera	Safari	IExplorer	Edge
attribute ~ = value	4.0	2.0	9.6	3.1	7.0	12.0

CSS синтаксис:

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

Версия CSS

CSS2

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

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

Результат:

Абзац title="go home"

Абзац title="home home"

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

Абзац title="homes"

Абзац title="shome"

CSS селекторы