Селектори CSS: селектори атрибутів

30

Від автора: стаття є витягом з книги CSS майстер за авторством Tiffany B. Brown. Книгу можна придбати в магазинах по всьому світу або придбати цифрову версію. Селектори атрибутів посилаються на елементи по їх атрибутам. Це може бути просто атрибут ([type]) або атрибут зі значенням ([type=checkbox] або [for=»email»]).

Також можна перевіряти наявність атрибута і входження підрядка в селектори атрибутів. Наприклад, значення атрибута можна перерахувати через пробіл, або ж можна посилатися на елемент, чиє значення атрибута починається на tel:. В атрибутах можна навіть вказувати значення з тире, наприклад, en-US.

Деякі з атрибутів, з якими ми сьогодні познайомимося, досить старі. Значення з тире і значення через пробіл в селекторах атрибутів були прописані в CSS2. У специфікації Selectors Level 3 з’явилося кілька потужних селекторів, з допомогою яких можна шукати елементи у частині значення атрибута.

У цьому розділі ми зосередимося на нових і маловідомих селекторах атрибутів. Давайте почнемо.

Перевірка наявності атрибуту

Шукати елементи по точному значенню атрибута – звичайна справа. Стилі для скидання зазвичай використовують селектори типу [type=text] і [type=email]. Але ми можемо перевіряти атрибути з кількома значеннями, відокремлених пропуском. Для цього потрібно скористатися селектором [att~=val].

Селектор атрибуту значення, розділені пробілом шукає елементи з атрибутом att і рядом значень, одне з яких val. Це може бути будь-атрибут, що приймає значення, розділені пробілом, в тому числі class або data=*.

А ось кілька атрибутів, розділених пробілом – рідкість. Їх іноді використовують з атрибутом rel і микроформатами для опису зв’язку між людьми і документами. Зовнішнє посилання можна записати наступним чином:

Bob

Для пошуку посилання та всіх схожих можна використовувати селектор атрибута з умовою присутності:

[rel~=friend] {
font-size: 2em;
background: #eee;
padding: 4px;
text-decoration: none;
border-bottom: 3px solid #ccc;
}
[rel~=friend]:link,
[rel~=friend]:visited {
color: #34444C;
}
[rel~=friend]:hover{
background: #ffeb3b;
border-color: #ffc107;
}

Результат показано на скріншоті нижче.

CSS селекторы: селекторы атрибутов

Пошук за значеннями атрибута з дефісом

Одна з найцікавіших задач, яку можна виконувати з допомогою селекторів атрибутів, полягає в пошуку елементів з допомогою значень атрибутів з дефісом. Для цього необхідно використовувати запис [attr|=val]. Цей селектор шукає елементи атрибуту, в якому значення буде містити дефіс, а префікс буде дорівнює val.

На перший погляд селектор марний. Проте його можна використовувати з мовами і кодами мов, en-US або es-MX.

Скажімо, у нас є сайт, націлений на англомовну аудиторію. Наш сайт підтримує дві регіональні варіації англійської: британську та американську. Коди цих варіацій будуть en-GB і en-US. В тегу html ми поставили мову, наприклад, .

Наш сайт вчить людей, що говорять на англійській, французькій, іспанській і португальській. На сайті багато розмітки подібного роду:

Tout le monde.

All the world., or Everyone

Давайте зробимо французький текст курсивним і додамо відповідні лапки (« і ») з обох сторін:

[lang|=»fr»] {
font-style: italic;
}
[lang|=»fr»] q:before{
content: ‘\00AB’; /* Ліва лапки */
}
[lang|=»fr»] q:after{
content: ‘\00BB’; /* Права лапки */
}

Чим хороший цей селектор, так це тим, що він буде знаходити елементи, навіть якщо атрибут дорівнює префікса. Стилі вище застосуються до

. Можна звузити область пошуку для цих селекторів, наприклад, додавши елемент p до атрибуту lang: p[lang|=»fr»].

Селектор створений для роботи з мовними кодами, але не обмежується тільки ними. Його можна використовувати з будь-яким значенням атрибута з тире. Розглянемо наступну розмітку:

U. S. ratifies Kyoto Protocol

Lorem ipsum dolor sit amet, consectetur adipisicing ….

Kardashian-Wests welcome South to the world

Lorem ipsum dolor sit amet, consectetur adipisicing ….

New York Knicks win NBA title

Lorem ipsum dolor sit amet, consectetur adipisicing ….

Google Buys EverythingOnTheInternet.com

Lorem ipsum dolor sit amet, consectetur adipisicing ….

Це превью статей або тизери. Їх пов’язують однакові візуальні характеристики і поведінку, а також префікс articlepromo. Для пошуку цих класів також можна використовувати селектор атрибута з дефісом:

[class|=»articlepromo»] {
border-top: 5px solid #4caf50;
color: #555;
line-height: 1.3;
padding-top: .5em;
}
[class|=»articlepromo»] h3 {
color: #000;
font-size: 1.2 em;
margin:0;
}
[class|=»articlepromo»] p {
margin: 0 0 1em;
}

Відокремте кожен розділ рамкою певного кольору і отримаєте щось схоже на скріншот нижче.

CSS селекторы: селекторы атрибутов

Цей селектор можна використовувати з id. Наприклад, [id|=global] підходить під #global-footer, #global-menu і т. д.

Не варто використовувати що-то просто тому, що ви можете. Селектор зі значенням атрибута з дефісом ідеально підходить для стилізації різних мов. Для всього іншого простіше використовувати класи. Класи знижують незаплановані ризики у великих проектах. Класи обов’язкові, якщо вам потрібно підтримувати IE8, так як IE8 не підтримує селектори атрибутів з дефісом.

Пошук значень атрибутів з підрядку

Вибирати елементи можна також, коли значення ознаки збігаються за певною підрядку. Три набору символів дозволяють шукати елементи за різних умов: знаходиться підрядок на початку, кінці або десь ще у значенні атрибуту.

^= шукає елементи, коли підрядок знаходиться на початку рядка.

$= шукає елементи, коли підрядок знаходиться в кінці рядка.

*= шукає елементи, коли підрядок представлена в будь-якому місці рядка.

Коли може допомогти цей селектор? Згадайте про посилання tel: і mailto:. Вони ведуть себе не так, як інші посилання, тому і стилізувати їх потрібно по-іншому, щоб дати користувачеві підказку. Візьмемо посилання Call this business:

Call this business

Знайти цю та інші посилання tel: можна з допомогою ^=: [href^=»tel:»]. Додамо стилі:

[href^=»tel:»] {
background: #2196f3 url(../images/phone-icon.svg) 10px center / 20px auto no-repeat;
border-radius: 100px;
padding: .5em 1em .5em 2em;
}

Результат показано на зображенні нижче.

CSS селекторы: селекторы атрибутов

Для пошуку елементів, чиє значення атрибута закінчується на підрядок, замініть ^$. Якщо з якоїсь дивної причина – підкреслю, дивною – ми захочемо шукати елемент по чотирьом останнім цифрам телефону (5555), необхідно використовувати код:

[href$=»5555″] {
background: #e91e63;
}

Набагато зручніше шукати елементи, що закінчуються на один суфікс. Наприклад, можна одночасно знайти за допомогою [class$=sidebar].

Однак $= не знайде клас sports-sidebar-a. Тут нам знадобиться *=. І селектор зміниться на [class*=sidebar].

У CSS3 і CSS4 нові селектори здебільшого не працюють з атрибутами. Це псевдокласи або псевдоелементи. Їх ми розглянемо в наступних главах.