Селектори по атрибутам в css, css-tricks по-російськи

Селектори по атрибутам в CSS

У CSS існує можливість звернутися до елементів html-документа за значенням його атрибутів. Ви, звичайно, вже знаєте про ID і класи. Давайте поглянемо на наступний html:

У цього елемента три атрибути: id, class і rel. Звернутися до цього елементу в CSS ви можете або за його ідентифікатором (# first-title), або по імені класу (.magical). Однак чи знали ви, що ви також можете звернутися до нього, використовуючи атрибут rel? Це і називається селектори по атрибутам:

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

[Rel = external]
Атрибут точно відповідає заданому значенню

У наведеному вище прикладі, атрибут елемента h2 дорівнював "friend". Селектор, який ми написали посилався на нього, оскільки значення атрибута точно так само "friend". Саме точне. Давайте подивимося на інший приклад:

Більш реальний приклад - стилізація блогрол (blogroll). Скажімо у вас є список посилань на дружні сайти:

І ви хочете задати кожному посиланні свій стиль. Традиційний підхід полягає в тому, що кожному посиланні вказується клас, але цей підхід вимагає додаткової розмітки. Інший спосіб - це використання псевдоселектора nth-child. Однак цей підхід вимагає певного порядку елементів. Ця проблема ідеально підходить для застосування селектор по атрибутам, оскільки посилання вже є унікальними.

Я впевнений, що найбільш часто цей тип селектора використовується для елементів input (text, radio і т.п.). Всі ці елементи сильно відрізняються один від одного, і писати що-небудь типу input в більшості випадків не найкраща ідея. Набагато частіше використовується такий запис:

Це єдиний спосіб стилізувати елементи input без додаткової розмітки і всіляких хитрощів.

[Rel * = external]
Атрибут містить задане значення.

Тепер починаються більш цікаві речі. Знаку рівності в селекторі по атрибуту може передувати інший знак, який змінює призначення його використання. Наприклад, "* =" означає "задане значення може перебувати де завгодно в значенні зазначеного атрибута". Погляньте на наступний приклад:

Ви можете підсвітити всі ці елементи в такий спосіб:

[Rel ^ = external]
Атрибут починається з заданого значення

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

[Rel $ = external]
Атрибут закінчується на задане значення

Якщо є можливість зробити вибір щодо початку значення атрибуту, то чому не бути і зворотній можливості?

Чесно кажучи, я не зміг знайти реального прикладу застосування такого виду селектора. Але я вірю що він існує. Припустимо, що вам необхідно підсвітити посилання, які закінчуються не значущими символами:

= External]
Атрибут знаходиться в списку, розділеному пробілами

Як ви вже знаєте, ви можете вказати декілька класів стилів для одного елемента. І якщо ви робите саме так, то ви можете використовувати ім'я класу для доступу до елементу в CSS. У разі використання селектор по атрибуту, не все так просто. Якщо атрибуту rel присвоєно кілька значень (розділених пробілами), то вам необхідно використовувати "

Ви можете подумати, чому б нам не використовувати в цьому випадку "* =". Дійсно, такий варіант використання більш гнучкий, проте він може бути занадто гнучкий. Розглянутий селектор вимагає, щоб значення відділялося прогалиною, а "* =" - немає. Таким чином, якщо у вас є два елементи (один з rel = home friend-link. А другий з rel = home friend link), то вам необхідно використовувати селектор для випадку з пробілами, щоб вибрати тільки другий елемент.

[Rel | = external]
Атрибут знаходиться в списку, розділеному дефісами

Список, розділений дефісами дуже схожий на описаний вище список розділений пробілами. Але знову ж таки є свої особливості перед використанням селектора з "* =".

[Title = one] [rel ^ = external]
Відповідність за кількома атрибутам

Дуже важливо, що для вибірки елементів є можливість використовувати відразу декілька селектор по атрибутам.

підтримка браузерами

Кожен приклад, наведений вище, працює у всіх сучасних браузерах: Safari, Chrome, Firefox, Opera і IE7 і вище.