Пошук уроків, статей та іншого контенту
Навчитеся вибирати елементи за наявністю, значенням і частковим збігом атрибутів.
Селектори атрибутів дають змогу вибирати HTML-елементи за їхніми атрибутами.
Наприклад, можна вибрати:
усі елементи, які мають певний атрибут;
елементи з конкретним значенням атрибута;
елементи, значення атрибута яких починається або закінчується певним текстом;
елементи, у значенні атрибута яких міститься певний фрагмент.
Загальний синтаксис:
[назва-атрибута] {
властивість: значення;
}Наприклад:
[disabled] {
opacity: 0.5;
}Це правило вибере всі елементи, які мають атрибут disabled.
Щоб вибрати елементи за наявністю атрибута, запишіть його назву у квадратних дужках:
[required] {
border: 2px solid orange;
}Це правило вибере всі елементи з атрибутом required:
<input type="text" required>
<input type="email" required>
<textarea required></textarea>Селектор не перевіряє значення атрибута. Важливо лише те, що атрибут присутній.
Наприклад, усі ці елементи відповідатимуть селектору [data-status]:
<div data-status="new"></div>
<div data-status="completed"></div>
<div data-status=""></div>Приклад для посилань із атрибутом target:
[target] {
text-decoration: underline;
}<a href="/about">Про нас</a>
<a href="/docs" target="_blank">Документація</a>Стиль буде застосовано лише до другого посилання.
Щоб вибрати елементи з конкретним значенням атрибута, використовуйте оператор =:
input[type="email"] {
background-color: #eef6ff;
}Це правило вибирає лише поля, у яких type дорівнює email:
<input type="text">
<input type="email">
<input type="password">Значення атрибута зазвичай записують у лапках:
button[type="submit"] {
background-color: green;
color: white;
}У цьому прикладі селектор складається з:
назви елемента button;
атрибута type;
точного значення "submit".
Тому він вибере лише такі кнопки:
<button type="submit">Зберегти</button>
<button type="button">Скасувати</button>Клас також можна поєднувати із селектором атрибута:
.button[aria-disabled="true"] {
cursor: not-allowed;
opacity: 0.6;
}<button class="button" aria-disabled="true">
Недоступна дія
</button>Іноді потрібно перевірити не все значення атрибута, а лише його частину. Для цього CSS має спеціальні оператори.
^=Селектор [атрибут^="значення"] вибирає елементи, значення атрибута яких починається з указаного тексту.
a[href^="https://"] {
color: darkgreen;
}Це правило вибере посилання, адреса яких починається з https://:
<a href="https://example.com">Зовнішній сайт</a>
<a href="https://fullstack.org.ua">Навчання</a>
<a href="/about">Про нас</a>Третє посилання не буде вибране, тому що його значення href починається з /.
Ще один приклад:
img[src^="/images/"] {
border: 1px solid gray;
}Правило вибирає зображення, шлях до яких починається з /images/.
$=Селектор [атрибут$="значення"] вибирає елементи, значення атрибута яких закінчується вказаним текстом.
a[href$=".pdf"] {
font-weight: bold;
}Це правило вибере посилання на PDF-файли:
<a href="/files/rules.pdf">Правила</a>
<a href="/files/report.docx">Звіт</a>
<a href="/files/guide.pdf">Посібник</a>Будуть вибрані перше і третє посилання.
Так можна стилізувати зображення певного формату:
img[src$=".png"] {
outline: 2px solid purple;
}*=Селектор [атрибут*="значення"] вибирає елементи, значення атрибута яких містить указаний фрагмент у будь-якому місці.
a[href*="example.com"] {
color: purple;
}Правило вибере такі посилання:
<a href="https://example.com">Головна сторінка</a>
<a href="https://example.com/about">Про сайт</a>
<a href="/contact">Контакти</a>Перші два посилання містять у значенні href текст example.com.
Оператор *= шукає саме послідовність символів. Він не обмежує збіг початком або кінцем значення.
~=Селектор [атрибут~="значення"] вибирає елементи, значення атрибута яких містить окреме слово.
Найчастіше його використовують з атрибутом class:
[class~="featured"] {
border: 2px solid gold;
}Будуть вибрані елементи, у яких featured є окремим класом:
<article class="card featured">Стаття 1</article>
<article class="card">Стаття 2</article>Цей селектор не вибере клас featured-card, тому що featured там не є окремим словом.
Зазвичай для класів використовують крапку:
.featured {
border: 2px solid gold;
}Оператор ~= корисний, коли потрібно перевірити значення атрибута зі списком слів.
|=Селектор [атрибут|="значення"] вибирає точне значення або значення, яке починається з указаного тексту та дефіса.
[lang|="uk"] {
font-family: Arial, sans-serif;
}Правило відповідає таким елементам:
<p lang="uk">Український текст</p>
<p lang="uk-UA">Український текст для України</p>Але не відповідає елементу:
<p lang="ukrainian">Текст</p>Значення ukrainian не дорівнює uk і не починається з uk-.
У більшості випадків значення атрибутів у CSS порівнюються з урахуванням регістру.
[data-theme="dark"] {
background-color: #222;
color: white;
}Цей селектор відповідає:
<div data-theme="dark">Темна тема</div>Але значення Dark може не вважатися таким самим:
<div data-theme="Dark">Інше значення</div>Для порівняння без урахування регістру після значення можна додати прапорець i:
[data-theme="dark" i] {
background-color: #222;
color: white;
}Тепер селектор може відповідати значенням dark, Dark або DARK.
Підтримка такого порівняння залежить від браузера, але сучасні браузери його підтримують.
Селектори атрибутів можна поєднувати з назвами елементів, класами та іншими селекторами.
input[required] {
border-color: red;
}Правило вибере лише обов’язкові елементи input, а не всі елементи з required.
input[type="email"][required] {
border: 2px solid blue;
}Правило відповідає лише полю, яке одночасно:
є елементом input;
має type="email";
має атрибут required.
<input type="email" required>
<input type="email">
<input type="text" required>Буде вибране лише перше поле.
.card[data-status="completed"] {
background-color: #e6f7e6;
}<div class="card" data-status="completed">
Завдання виконано
</div>
<div class="card" data-status="pending">
Завдання в процесі
</div>Правило застосовується лише до картки зі статусом completed.
У наступному прикладі різні поля форми стилізуються за допомогою селекторів атрибутів:
<!doctype html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>Селектори атрибутів</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 40px auto;
padding: 0 16px;
}
form {
display: grid;
gap: 12px;
}
input[required] {
border: 2px solid #e09f3e;
padding: 8px;
}
input[type="email"] {
background-color: #eef6ff;
}
input[name^="user"] {
outline: 2px solid #cde7be;
}
button[type="submit"] {
background-color: #276749;
color: white;
border: 0;
padding: 10px 16px;
cursor: pointer;
}
a[href^="https://"] {
color: #276749;
}
a[href$=".pdf"] {
font-weight: bold;
}
</style>
</head>
<body>
<h1>Реєстрація</h1>
<form>
<label>
Ім’я
<input type="text" name="username" required>
</label>
<label>
Електронна пошта
<input type="email" name="user-email" required>
</label>
<button type="submit">Зареєструватися</button>
<button type="button">Очистити</button>
</form>
<p>
<a href="https://example.com">Документація</a>
</p>
<p>
<a href="/files/rules.pdf">Правила у форматі PDF</a>
</p>
</body>
</html>У прикладі:
input[required] вибирає обов’язкові поля;
input[type="email"] вибирає поле для електронної пошти;
input[name^="user"] вибирає поля, чиє ім’я починається з user;
button[type="submit"] вибирає кнопку надсилання форми;
a[href^="https://"] вибирає зовнішнє посилання;
a[href$=".pdf"] вибирає посилання на PDF-файл.
Селектори атрибутів особливо корисні, коли:
HTML уже має потрібні атрибути;
потрібно стилізувати різні типи полів форми;
треба відрізнити активні, вимкнені або обов’язкові елементи;
потрібно стилізувати посилання залежно від їхньої адреси;
для станів елементів використовуються data-* або aria-* атрибути.
Наприклад:
button[disabled] {
opacity: 0.5;
cursor: not-allowed;
}
[data-state="error"] {
color: #b00020;
}
[aria-current="page"] {
font-weight: bold;
}Однак не варто замінювати селекторами атрибутів усі класи. Класи зазвичай краще підходять для повторного використання стилів, а атрибути — для вибору елементів за їхньою роллю, типом або станом.
Неправильно:
required {
border-color: red;
}Правильно:
[required] {
border-color: red;
}Назва required без дужок сприймається як селектор елемента, а не атрибута.
Селектор:
[disabled] {
opacity: 0.5;
}перевіряє наявність атрибута.
Селектор:
[aria-expanded="true"] {
display: block;
}перевіряє конкретне значення атрибута.
Це різні умови, тому потрібно обирати відповідний синтаксис.
= замість *= або ^=Селектор із точним порівнянням:
a[href="https://example.com"] {
color: green;
}вибере лише одне точне значення.
Він не вибере адресу:
https://example.com/aboutДля адрес, що містять певний домен, можна використати:
a[href^="https://example.com"] {
color: green;
}~=Селектор:
[class~="card"] {
padding: 16px;
}знайде class="card featured", але не знайде class="card-large".
Оператор ~= шукає окреме слово, а не довільну частину рядка.
Рекомендується писати значення атрибутів у лапках:
input[type="text"] {
color: black;
}Такий запис зрозуміліший і безпечніший для значень, які містять спеціальні символи або пробіли.
[attribute] вибирає елементи за наявністю атрибута.
[attribute="value"] вибирає елементи з точним значенням.
[attribute^="value"] перевіряє початок значення.
[attribute$="value"] перевіряє кінець значення.
[attribute*="value"] шукає фрагмент у будь-якому місці значення.
[attribute~="value"] шукає окреме слово у списку значень.
[attribute|="value"] перевіряє точне значення або значення з дефісом після нього.
Селектори атрибутів можна поєднувати з назвами елементів, класами та іншими атрибутами.
Вони особливо корисні для форм, посилань і елементів зі станами.