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

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

От автора: статья является выдержкой из нашей книги CSS мастер за авторством Tiffany B. Brown. Книгу можно купить в магазинах по всему миру или приобрести цифровую версию. Селекторы атрибутов ссылаются на элементы по их атрибутам. Это может быть просто атрибут ([type]) или атрибут со значением ([type=checkbox] или [for=”email”]).

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

Некоторые из атрибутов, с которыми мы сегодня познакомимся, довольно старые. Значения с тире и значения через пробел в селекторах атрибутов были прописаны в CSS2. В спецификации Selectors Level 3 появилось несколько мощных селекторов, с помощью которых можно искать элементы по части значения атрибута.

В этой главе мы сосредоточимся на новых и малоизвестных селекторах атрибутов. Давайте начнем.

Проверка наличия атрибута

Искать элементы по точному значению атрибута – обычное дело. Стили для сброса обычно используют селекторы типа [type=text] и [type=email]. Но мы можем проверять атрибуты с несколькими значениями, разделенными пробелом. Для этого нужно воспользоваться селектором [att~=val].


Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Селектор атрибута со значениями, разделенными пробелом ищет элементы с атрибутом att и рядом значений, одно из которых val. Это может быть любой атрибут, принимающий значения, разделенные пробелом, в том числе class или data=*.

А вот несколько атрибутов, разделенных пробелом – редкость. Их иногда используют с атрибутом rel и микроформатами для описания связи между людьми и документами. Внешнюю ссылку можно записать следующим образом:

<a href="http://example.com/" rel="external friend">Bob</a>

Для поиска этой ссылки и всех похожих можно использовать селектор атрибута с условием присутствия:

[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 мы задали язык, например, <html lang=»en-US»>.

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

<p lang="fr-FR"><q>Tout le monde.</q></p>
<p><q>All the world.</q>, or <q>Everyone</q></p>

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

[lang|="fr"] {
 font-style: italic;
}
[lang|="fr"] q:before{
 content: '\00AB'; /* Левая кавычка */
}
[lang|="fr"] q:after{
 content: '\00BB';  /* Правая кавычка */
}

Чем хорош этот селектор, так это тем, что он будет находить элементы, даже если атрибут равен префиксу. Стили выше применятся к

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

Селектор создан для работы с языковыми кодами, но не ограничивается только ими. Его можно использовать с любым значением атрибута с тире. Разберем следующую разметку:

<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. Для поиска этих классов также можно использовать селектор атрибута с дефисом:

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Узнать подробнее
[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;
}

Отделите каждый раздел рамкой определенного цвета и получите что-то похожее на скриншот ниже.

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

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

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

Поиск значений атрибутов по подстроке

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

^= ищет элементы, когда подстрока находится в начале строки.

$= ищет элементы, когда подстрока находится в конце строки.

*= ищет элементы, когда подстрока представлена в любом месте строки.

Когда может помочь этот селектор? Вспомните о ссылках tel: и mailto:. Они ведут себя не так, как другие ссылки, поэтому и стилизовать их нужно по-другому, чтобы дать пользователю подсказку. Возьмем ссылку Call this business:

<a href="tel:+14045555555">Call this business</a>

Найти эту и другие ссылки 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;
}

Намного удобнее искать элементы, заканчивающиеся на один суффикс. Например, можно одновременно найти <aside class=»sports-sidebar»> и <aside class=»arts-sidebar»> с помощью [class$=sidebar].

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

В CSS3 и CSS4 новые селекторы по большей части не работают с атрибутами. Это псевдоклассы или псевдоэлементы. Их мы обсудим в следующих главах.

Автор: Tiffany Brown

Источник: https://www.sitepoint.com/

Редакция: Команда webformyself.


Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree