Існує безліч способів вибору елементів у CSS. Найпростіший вибір - за назвою тегу, наприклад p ( ). Майже що-небудь більш конкретне, ніж селектор тегів, використовує атрибути - classі IDобидва вони вибирають ці атрибути в елементах HTML. Але classі IDне єдині атрибути, які розробники можуть вибрати. Ми можемо використовувати будь-який атрибут елемента як селектор.
Вибір атрибутів має спеціальний синтаксис. Ось приклад:
a(href="https://css-tricks.com") ( color: #E18728; )Це селектор точної відповідності , який буде вибирати лише посилання з точним hrefзначенням атрибута “https://css-tricks.com”.
Сім різних типів
Селектори атрибутів за замовчуванням чутливі до регістру (див. Відповідність, що не враховує регістр, нижче) і записуються в дужки ().
Існує сім різних типів збігів, які можна знайти за допомогою селектора атрибутів, і синтаксис для кожного різний. Кожен із більш складних селекторів атрибутів спирається на синтаксис селектора точної відповідності - усі вони починаються з імені атрибута і закінчуються знаком рівності, за яким слідують значення атрибута, зазвичай у лапках. Те, що співпадає між назвою атрибута та знаком рівності, є тим, що робить різницю між селекторами.
(data-value) ( /* Attribute exists */ ) (data-value="foo") ( /* Attribute has this exact value */ ) (data-value*="foo") ( /* Attribute value contains this value somewhere in it */ ) (data-value~="foo") ( /* Attribute has this value in a space-separated list somewhere */ ) (data-value^="foo") ( /* Attribute value starts with this */ ) (data-value|="foo") ( /* Attribute value starts with this in a dash-separated list */ ) (data-value$="foo") ( /* Attribute value ends with this */ )Значення містить: значення атрибута містить термін як єдине значення, значення у списку значень або як частину іншого значення. Щоб використовувати цей селектор, додайте зірочку (*) перед знаком рівності. Наприклад, img(alt*="art")буде відбирати зображення з альтернативним текстом «абстрактне мистецтво» та «спортсмен, який починає новий вид спорту», оскільки значення «мистецтво» є в слові «стартовий».
Значення знаходиться у списку, розділеному пробілами: значення є або єдиним значенням атрибута, або є цілим значенням у наборі значень, розділених пробілами. На відміну від селектора “містить”, цей селектор не буде шукати значення як фрагмент слова. Щоб використовувати цей селектор, додайте тильду (~) перед знаком рівності. Наприклад, img(alt~="art")буде вибирати зображення з альтернативним текстом «абстрактне мистецтво» та «арт-шоу», але не «спортсмен, який починає новий вид спорту» (який би вибрав селектор «містить»).
Значення починається з: значення атрибута починається з обраного терміна. Щоб скористатися цим селектором, додайте перед символом рівності символ (^). Не забувайте, чутливість до регістру має значення. Наприклад, img (alt = ”art”) буде вибирати зображення з альтернативним текстом „art show” та „художнім малюнком”, але не зображення із альт-текстом „Arthur Miller”, оскільки „Arthur” починається з великої літери .
Значення перше в списку, розділеному тире: Цей селектор дуже схожий на селектор "починається з". Тут селектор відповідає значенню, яке є або єдиним значенням, або першим у списку значень, розділених тире. Щоб використовувати цей селектор, додайте символ знака (|) перед знаком рівності. Наприклад, li(data-years|="1900")буде вибирати елементи списку зі data-yearsзначенням "1900-2000", але не елемент списку зі data-yearsзначенням "1800-1900".
Значення закінчується на: значення атрибута закінчується вибраним терміном. Щоб використовувати цей селектор, додайте знак долара ($) перед знаком рівності. Наприклад, a(href$="pdf")вибирає кожне посилання, яке закінчується .pdf.
Примітка про лапки: За певних обставин можна обійти значення без лапок, але правила вибору без лапок несумісні між браузерами. Котирування завжди працюють, тому, якщо ви будете дотримуватися їх, ви можете бути впевнені, що ваш селектор буде працювати.
Перегляньте селектори атрибутів пера за допомогою CSS-Tricks (@ css-tricks) на CodePen.
Цікавий факт: значення обробляються як рядки, тому вам не потрібно робити будь-які химерні екранування символів, щоб вони збігалися, як це було б, якби ви використовували незвичні символи у селекторі класу або ідентифікатора.
(class="(╯°□°）╯︵ ┻━┻")( color: red; font-weight: bold; )Регулювання не враховується
Невідчутні до регістру селектори атрибутів є частиною специфікації селекторів робочої групи CSS рівня 4. Як зазначалося вище, рядки значень атрибутів за замовчуванням чутливі до регістру, але їх можна змінити на регістр, не враховуючи регістр, додавши iбезпосередньо перед закриваючою дужкою:
(attribute="value" i) ( /* Styles here will apply to elements with: attribute="value" attribute="VaLuE" attribute="VALUE"… etc */ )Збіг без урахування регістру може бути дуже зручним для націлювання на атрибути, що містять непередбачуваний текст, написаний людиною. Наприклад, припустімо, ви стилізували спливаючу підказку в програмі чату і хотіли додати «махаючу руку» до будь-яких повідомлень із текстом «привіт» у якійсь формі. Ви можете зробити це лише за допомогою CSS, використовуючи збіг, що не враховує регістр, щоб вловити всі можливі варіації:
Див. Атрибут CSS, не чутливий до регістру, який відповідає CSS-Tricks (@ css-tricks) на CodePen.
Поєднуючи їх
Ви можете поєднати селектор атрибутів з іншими селекторами, наприклад тегом, класом або ідентифікатором.
div(attribute="value") ( /* style rules here */ ) .module(attribute="value") ( /* style rules here */ ) #header(attribute="value") ( /* style rules here */ )Або навіть комбінувати кілька селекторів атрибутів. У цьому прикладі вибираються зображення з текстом альт , який включає в себе слово «людина» в якості єдиного значення або значення в список розділених пробілами, і в srcзначення , яке включає в себе значення «Lorem»:
img(alt~="person")(src*="lorem") ( /* style rules here */ )Див. Комбіновані атрибути пера та виділення лише атрибутів за допомогою CSS-Tricks (@ css-tricks) на CodePen.
Селектори атрибутів у JavaScript та jQuery
Селектори атрибутів можна використовувати в jQuery, як і будь-який інший селектор CSS. У JavaScript ви можете використовувати селектори атрибутів за допомогою document.querySelector()та document.querySelectorAll().
Перегляньте селектори атрибутів пера в JS та jQuery від CSS-Tricks (@ css-tricks) на CodePen.
Пов’язані
- клас
- Посвідчення особи
Більше інформації
- Худий на селекторах атрибутів
- Селектори атрибутів на MDN
- Селектори атрибутів у специфікації CSS W3C
Підтримка браузера
| Chrome | Сафарі | Firefox | Опера | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Будь-який | Будь-який | Будь-який | Будь-який | 7+ | Будь-який | Будь-який |