CSS [attribute^=value] — значення починається з
Селектор [attribute^=value< потрібен для вибірки елементів у котрих значення атрибута починаєтсья визначеним рядком.
Загальний опис
автор: NagarD
Синтаксис
attribute ^= value {
css declarations;
}Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 3 | 9 | 12 | 7 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 1 |
Приклади
+ запропонувати свій приклад у пісочниці
Селектор ^= дивиться на початок значення: class="test1" підходить, а class="mytest" — ні, бо "test" там не на початку.
HTML
<div class="test1">class="test1" — жовтий</div>
<div class="mytest">class="mytest" — без змін: "test" не на початку</div>CSS
div[class^="test"] {
background: #ffff00;
}Той самий селектор без імені тега працює для будь-якого елемента, чий class починається з "test".
HTML
<div class="test-block">div із class="test-block" — жовтий</div>
<p class="testtext">p із class="testtext" — теж жовтий</p>
<p class="mytest">class="mytest" — без змін</p>CSS
[class^="test"] {
background: #ffff00;
}Одне правило на кожен вид посилання — жодних класів у розмітці.
HTML
<ul class="links">
<li><a href="https://example.com">Зовнішнє посилання</a></li>
<li><a href="mailto:[email protected]">Написати листа</a></li>
<li><a href="tel:+380441234567">Зателефонувати</a></li>
<li><a href="/uk/pro-nas">Внутрішня сторінка</a></li>
</ul>CSS
.links {
list-style: none;
padding: 0;
font: 16px/2 system-ui, sans-serif;
}
a[href^="https://"]::before { content: "🌐 "; }
a[href^="mailto:"]::before { content: "✉️ "; }
a[href^="tel:"]::before { content: "📞 "; }
a[href^="/"]::before { content: "→ "; }Коментарі
Коментарів ще немає — будьте першим!