CSS [attribute*=value] — значення містить підрядок
Селектор [attribute*=value] потрібен для обрання елементів з визначенним атрибутом і зазначеним вмістом
Загальний опис
автор: NagarD
Синтаксис
attribute *= value {
css declarations;
}Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 3 | 9 | 12 | 7 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 1 |
Приклади
+ запропонувати свій приклад у пісочниці
Селектор *= шукає підрядок будь-де у значенні: "mytest" містить "test", а "team" — ні.
HTML
<div class="mytest">class="mytest" — жовтий: містить "test"</div>
<div class="team">class="team" — без змін</div>CSS
div[class*="test"] {
background: #ffff00;
}Без імені тега селектор *= зачіпає будь-який елемент, у чиєму class трапляється "test" — хай навіть усередині іншого слова.
HTML
<p class="latest-news">p із class="latest-news" — жовтий: "test" усередині "latest"</p>
<div class="contest">div із class="contest" — жовтий</div>
<div class="news">class="news" — без змін</div>CSS
[class*="test"] {
background: #ffff00;
}*= не знає меж слів: правило чіпляється до підрядка будь-де у значенні.
HTML
<ul class="v">
<li><a href="https://www.youtube.com/watch?v=1">Відео на YouTube</a></li>
<li><a href="https://vimeo.com/12345">Відео на Vimeo</a></li>
<li><a href="/go?to=youtube.com">Перехід через редірект</a></li>
</ul>CSS
.v {
list-style: none;
padding: 0;
font: 16px/2 system-ui, sans-serif;
}
/* спрацює й на прямому посиланні, і на редіректі */
a[href*="youtube"] {
color: #dc2626;
font-weight: 600;
}
a[href*="vimeo"] { color: #0891b2; }Коментарі
Коментарів ще немає — будьте першим!