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

CSS селекторы

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

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

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

СелекторChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
attribute ~ = value4.02.09.63.17.012.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 селекторы