CSS [attribute=value] — точний збіг значення атрибута
Селектор [attribute=value] використовується для вибірки елементів із зазначенимим атрибутом і його, точним, значенням. Значення атрибута вказується точно, тобто, елемент з attribute="value full" та attribute="value-full" не будуть обрані.
Загальний опис
автор: NagarD
Синтаксис
[attribute |= value] {
css declarations;
}[attribute = value] {
css declarations;
}Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 3 | 9 | 12 | 7 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 1 |
Приклади
+ запропонувати свій приклад у пісочниці
Тут значення атрибута вже важливе: жовтим стає лише посилання з target="_blank".
HTML
<p><a href="/css/properties" target="_blank">target="_blank" — жовте</a></p>
<p><a href="/css/properties" target="_self">target="_self" — без змін</a></p>CSS
a[target=_blank] {
background-color: yellow;
}Селектор input[type=text] зачіпає лише текстові поля: клацни у поле — воно плавно розшириться завдяки :focus і transition.
HTML
<p>Клацни в поле — воно плавно розшириться:</p>
<input type="text" placeholder="Натисни сюди">CSS
input[type=text] {
width: 100px;
transition: width .35s ease-in-out;
}
input[type=text]:focus {
width: 250px;
}Поля форми різняться лише атрибутом type — саме тому їх і чіпляють за значенням.
HTML
<form class="f">
<input type="text" placeholder="текст">
<input type="email" placeholder="пошта">
<input type="password" placeholder="пароль">
</form>CSS
.f {
display: grid;
gap: .6rem;
max-width: 18rem;
font: 15px system-ui, sans-serif;
}
.f input {
padding: .5rem;
border: 1px solid #94a3b8;
border-radius: 6px;
}
input[type="email"] { border-color: #2563eb; }
input[type="password"] { border-color: #dc2626; letter-spacing: .2em; }Коментарі
Коментарів ще немає — будьте першим!