CSS Селектори атрибутів
Стиль HTML-елементів з визначеними атрибутами
Можна стилізувати елементи HTML, які мають визначені атрибути або значення атрибутів.
CSS селектор [attribute]
Селектор [attribute] використовується для вибору елементів зі вказаним атрибутом.
В наступному прикладі обираються всі елементи <a> з атрибутом target:
CSS селектор [attribute="value"]
Селектор [attribute="value"] використовується для вибору елементів зі вказаним атрибутом і значенням.
В наступному прикладі обираються всі елементи <a> з атрибутом target="_blank":
CSS селектор [attribute~="value"]
Селектор [attribute~="value"] використовується для вибору елементів зі значенням атрибута, що містить вказане слово.
В наступному прикладі обираються всі елементи з атрибутом title, який містить розділений пробілами список слів, одним із яких є "flower":
Наведений вище приклад буде відповідати елементам з title="flower", title="summer flower" та title="flower new", але не title="my-flower" або title="flowers".
CSS селектор [attribute|="value"]
Селектор [attribute|="value"] використовується для вибору елементів зі вказаним атрибутом, починаючи зі вказаного значення.
В наступному прикладі обираються всі елементи зі значенням атрибуту class, які починаються з "top":
Примітка: Значення має бути цілим словом, або одне, як class="top", або з дефісом ( - ), як class="top-text"!
CSS селектор [attribute^="value"]
Селектор [attribute^="value"] використовується для вибору елементів, значення атрибута яких починається зі вказаного значення.
В наступному прикладі обираються всі елементи зі значенням атрибута class, які починаються з "top":
Примітка: Значення не повинно бути цілим словом!
CSS селектор [attribute$="value"]
Селектор [attribute$="value"] використовується для вибору елементів, значення атрибута яких закінчується вказаним значенням.
В наступному прикладі обираються всі елементи зі значенням атрибута class, які закінчуються "test":
Примітка: Значення не повинно бути цілим словом!
CSS селектор [attribute*="value"]
Селектор [attribute*="value"] використовується для вибору елементів, значення атрибута яких містить вказане значення.
В наступному прикладі обираються всі елементи зі значенням атрибута class, які містять "te":
Примітка: Значення не повинно бути цілим словом!
Стилізація форм
Селектори атрибутів можуть бути корисні для стилізації форм без класу або ID:
Приклад
input[type="text"] {
width: 150px;
display: block;
margin-bottom: 10px;
background-color: yellow;
}
input[type="button"] {
width: 120px;
margin-left: 35px;
display: block;
}
Спробуйте самі »
Порада: Відвідайте CSS Підручник форм на нашому сайті W3Schools українською, щоб отримати додаткові приклади того, як стилізувати форми за допомогою CSS.
Перевірте себе за допомогою вправ!
Всі CSS селектори атрибутів
| Селектор | Приклад | Опис |
|---|---|---|
| [attribute] | [target] | Обирає всі елементи з атрибутом target |
| [attribute=value] | [target=_blank] | Обирає всі елементи з target="_blank" |
| [attribute~=value] | [title~=flower] | Обирає всі елементи з атрибутом title, що містить слово "flower" |
| [attribute|=value] | [lang|=en] | Обирає всі елементи зі значенням атрибута lang, що починається з "en" |
| [attribute^=value] | a[href^="https"] | Обирає кожен елемент <a>, значення атрибута href якого починається з "https" |
| [attribute$=value] | a[href$=".pdf"] | Обирає кожен елемент <a>, значення атрибута href якого закінчується на ".pdf" |
| [attribute*=value] | a[href*="w3schools"] | Обирає кожен елемент <a>, значення атрибута href якого містить підрядок "w3schools" |
