CSS [attribute] — вибірка за наявністю атрибута
Селектор [attribute] використовується для вибірки всіх елементів із зазначеним атрибутом.
Цьому селектору головне атрибут, значення цього атрибута ролі не грає.
Загальний опис
автор: NagarD
Синтаксис
[attribute] {
css declarations;
}Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 3 | 9 | 12 | 7 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 1 |
Приклади
+ запропонувати свій приклад у пісочниці
Селектор a[target] обирає посилання, у яких атрибут target просто є — його значення не важливе.
HTML
<p><a href="/css/properties" target="_blank">Посилання з target</a> — жовте.</p>
<p><a href="/css/properties">Посилання без target</a> — звичайне.</p>CSS
a[target] {
background-color: yellow;
}Три форми на одній розмітці: наявність атрибута, точний збіг і «починається з».
HTML
<p><a href="https://example.com" target="_blank">Зовнішнє, у новій вкладці</a></p>
<p><a href="/docs/guide.pdf">Документ PDF</a></p>
<p><a href="/uk/pro-nas" title="Про нас">Внутрішнє з підказкою</a></p>CSS
body { font: 16px/1.9 system-ui, sans-serif; }
/* просто наявність атрибута */
a[target] { border-bottom: 2px dotted #f59e0b; }
/* точний збіг */
a[target="_blank"]::after { content: " ↗"; }
/* починається з — усі зовнішні */
a[href^="https://"] { color: #7c3aed; }
/* закінчується на — файли */
a[href$=".pdf"]::before { content: "📄 "; }Коментарі
Коментарів ще немає — будьте першим!