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

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

Селектор [attribute * = value] выбирает все элементы с атрибутом, значение которого содержит определённые слова/символы.

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

Селектор	Chrome	Firefox	Opera	Safari	IExplorer	Edge
*[attribute = value]**	4.0	3.5	9.6	3.2	7.0	12.0

CSS синтаксис:

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

Версия CSS

CSS3

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

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

Результат:

Абзац title="home"

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

Абзац title="homes"

Абзац title="shome"

Разберем еще один удобный способ выборки, на примере подбора изображений, содержащих, в имени название IMG (а-ля Canon).

img [src*="IMG_"] {блок объявлений }

Браузер интерпретирует это как необходимость выбора всех изображений, атрибут src которых содержит IMG_ (в любом месте). Зачастую такой способ позволяет быстрее отформатировать необходимые элементы, по сравнению с созданием и присвоением стилевого класса для каждого элемента.

CSS селекторы