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

CSS селекторы

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

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

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

СелекторChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
[attribute * = value]css3 4.03.59.63.27.012.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 селекторы