От автора: статья является выдержкой из нашей книги 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 и микроформатами для описания связи между людьми и документами. Внешнюю ссылку можно записать следующим образом:
|
1 |
<a href="//example.com/" rel="external friend">Bob</a> |
Для поиска этой ссылки и всех похожих можно использовать селектор атрибута с условием присутствия:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
[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; } |
Результат показан на скриншоте ниже.
Поиск по значениям атрибута с дефисом
Одна из интереснейших задач, которую можно выполнять с помощью селекторов атрибутов, заключается в поиске элементов с помощью значений атрибутов с дефисом. Для этого необходимо использовать запись [attr|=val]. Этот селектор ищет элементы по атрибуту, в котором значение будет содержать дефис, а префикс будет равен val.
На первый взгляд селектор бесполезен. Однако его можно использовать с языками и кодами языков, en-US или es-MX.
Скажем, у нас есть сайт, нацеленный на англоязычную аудиторию. Наш сайт поддерживает две региональные вариации английского: британскую и американскую. Коды этих вариаций будут en-GB и en-US. В теге html мы задали язык, например, <html lang=»en-US»>.
Наш сайт учит людей, говорящих на английском, французскому, испанскому и португальскому. На сайте много разметки подобного рода:
|
1 2 |
<p lang="fr-FR"><q>Tout le monde.</q></p> <p><q>All the world.</q>, or <q>Everyone</q></p> |
Давайте сделаем французский текст курсивным и добавим подходящие кавычки (« и ») с обеих сторон:
|
1 2 3 4 5 6 7 8 9 |
[lang|="fr"] { font-style: italic; } [lang|="fr"] q:before{ content: '\00AB'; /* Левая кавычка */ } [lang|="fr"] q:after{ content: '\00BB'; /* Правая кавычка */ } |
Чем хорош этот селектор, так это тем, что он будет находить элементы, даже если атрибут равен префиксу. Стили выше применятся к
. Можно сузить область поиска для этих селекторов, например, добавив элемент p к атрибуту lang: p[lang|=»fr»].
Селектор создан для работы с языковыми кодами, но не ограничивается только ими. Его можно использовать с любым значением атрибута с тире. Разберем следующую разметку:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<article class="articlepromo"> <h3>U.S. ratifies Kyoto Protocol</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing ....</p> </article> <article class="articlepromo-entertainment"> <h3>Kardashian-Wests welcome South to the world</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing ....</p> </article> <article class="articlepromo-sports"> <h3>New York Knicks win NBA title</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing ....</p> </article> <article class="articlepromo-business"> <h3>Google Buys EverythingOnTheInternet.com</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing ....</p> </article> |
Это превью статей или тизеры. Их связывают одинаковые визуальные характеристики и поведение, а также префикс articlepromo. Для поиска этих классов также можно использовать селектор атрибута с дефисом:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
[class|="articlepromo"] { border-top: 5px solid #4caf50; color: #555; line-height: 1.3; padding-top: .5em; } [class|="articlepromo"] h3 { color: #000; font-size: 1.2em; margin:0; } [class|="articlepromo"] p { margin: 0 0 1em; } |
Отделите каждый раздел рамкой определенного цвета и получите что-то похожее на скриншот ниже.
Данный селектор можно использовать с id. Например, [id|=global] подходит под #global-footer, #global-menu и т.д.
Не стоит использовать что-то просто потому, что вы можете. Селектор атрибута со значением с дефисом идеально подходит для стилизации различных языков. Для всего остального проще использовать классы. Классы снижают незапланированные риски в больших проектах. Классы обязательны, если вам нужно поддерживать IE8, так как IE8 не поддерживает селекторы атрибутов с дефисом.
Поиск значений атрибутов по подстроке
Выбирать элементы можно также, когда значения атрибута совпадают по определенной подстроке. Три набора символов позволяют искать элементы по разным условиям: находится ли подстрока в начале, конце или где-то еще в значении атрибута.
^= ищет элементы, когда подстрока находится в начале строки.
$= ищет элементы, когда подстрока находится в конце строки.
*= ищет элементы, когда подстрока представлена в любом месте строки.
Когда может помочь этот селектор? Вспомните о ссылках tel: и mailto:. Они ведут себя не так, как другие ссылки, поэтому и стилизовать их нужно по-другому, чтобы дать пользователю подсказку. Возьмем ссылку Call this business:
|
1 |
<a href="tel:+14045555555">Call this business</a> |
Найти эту и другие ссылки tel: можно с помощью ^=: [href^=»tel:»]. Добавим стили:
|
1 2 3 4 5 |
[href^="tel:"] { background: #2196f3 url(../images/phone-icon.svg) 10px center / 20px auto no-repeat; border-radius: 100px; padding: .5em 1em .5em 2em; } |
Результат показан на изображении ниже.
Для поиска элементов, чье значение атрибута заканчивается на подстроку, замените ^ на $. Если по какой-то странной причина – подчеркну, странной – мы захотим искать элемент по четырем последним цифрам телефона (5555), необходимо использовать код:
|
1 2 3 |
[href$="5555"] { background: #e91e63; } |
Намного удобнее искать элементы, заканчивающиеся на один суффикс. Например, можно одновременно найти <aside class=»sports-sidebar»> и <aside class=»arts-sidebar»> с помощью [class$=sidebar].
Однако $= не найдет класс sports-sidebar-a. Тут нам понадобится *=. И селектор изменится на [class*=sidebar].
В CSS3 и CSS4 новые селекторы по большей части не работают с атрибутами. Это псевдоклассы или псевдоэлементы. Их мы обсудим в следующих главах.
Автор: Tiffany Brown
Источник: //www.sitepoint.com/
Редакция: Команда webformyself.
