Ниже приводится выдержка из нашей книги CSS Master , написанной Тиффани Б. Браун. Копии продаются в магазинах по всему миру, или вы можете купить их в электронном виде здесь .
Селекторы атрибутов соответствуют элементам на основе их атрибутов. Это может быть только один атрибут, например [type][type=checkbox][for="email"]
Мы также можем сделать наличие атрибутов и сопоставление подстрок с помощью селекторов атрибутов. Например, мы можем сопоставить значения атрибутов в списке, разделенном пробелами, или сопоставить значения атрибутов, начинающиеся с tel: Мы можем даже сопоставить значения атрибутов через дефис, такие как en-US
Некоторые из селекторов атрибутов, которые мы рассмотрим здесь, это старая шляпа. Селектор значений атрибутов дефисов и селектор значений атрибутов через пробел были определены в CSS2. Уровень 3 селекторов, с другой стороны, добавляет несколько мощных селекторов, которые позволяют нам сопоставлять частичные значения атрибутов.
Мы сосредоточимся на новых и менее известных селекторах атрибутов в этом разделе. Давайте взглянем.
Соответствие атрибутов присутствия
Обычно совпадают элементы на основе точного значения их атрибутов. Для сброса таблиц стилей обычно используются селекторные селекторы, такие как [type=text][type=email] Но мы также можем сопоставлять атрибуты, когда есть несколько значений, разделенных пробелами. Нам нужно использовать наш селектор значения атрибута через пробел: [att~=val]
Селектор значений атрибутов, разделенных пробелами, сопоставляет элементы с атрибутом attval Это может быть любой атрибут, который принимает значения, разделенные пробелом, включая classdata-*
Разделенные пробелами списки атрибутов по общему признанию редки. Иногда они используются с 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;
}
Это дает нам изображение на рисунке ниже.
Соответствие значений атрибутов с дефисом
Одной из наиболее интересных задач, которые мы можем выполнить с помощью селекторов атрибутов, является сопоставление элементов с дефисированными значениями атрибутов с помощью [attr|=val] Этот селектор сопоставляет элементы по атрибуту, когда его значение переносится через дефис, а его префикс равен val
На первый взгляд это может показаться бесполезным селектором; тем не менее, это довольно практично для работы с языками и языковыми кодами, такими как en-USes-MX
Допустим, у нас есть сайт, ориентированный на носителей английского языка. Наш сайт также поддерживает два региональных варианта на английском языке: Великобритания и США. Коды языков для этих языков — en-GBen-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'; /* Left angle quote */
}
[lang|="fr"] q:after{
content: '\00BB'; /* Right angle quote */
}
Что хорошо в этом селекторе, так это то, что он также будет совпадать, если атрибут равен префиксу. Эти стили также применяются к <p lang="fr"> Мы могли бы дополнительно ограничить область действия этих селекторов, например, добавив элемент plangp[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 Здесь мы также можем использовать селектор атрибутов с дефисами для соответствия именам этих классов:
[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
Теперь, просто потому, что вы можете что-то сделать, не обязательно означает, что вы должны . Селектор значений атрибутов через дефис идеально подходит для определения различий в языке. Тем не менее, для любого другого использования вы бы также использовали селектор имени класса. Имена классов обеспечивают меньший риск непреднамеренных эффектов в большом проекте. Они также необходимы, если ваш проект все еще требует поддержки Internet Explorer 8, так как IE8 не поддерживает этот селектор.
Соответствие значений атрибутов по подстроке
Мы также можем выбирать элементы, когда значения атрибута соответствуют определенной подстроке. Три последовательности символов позволяют сопоставлять элементы в зависимости от того, находится ли эта подстрока в начале, конце или в другом месте значения атрибута:
-
^= -
соответствует, когда подстрока находится в начале строки.
-
$= -
соответствует, когда подстрока находится в конце строки.
-
*= -
соответствует, когда подстрока присутствует в любой позиции в строке.
Когда эти селекторы могут пригодиться? Подумайте о ссылках, используя tel:mailto: Поскольку они ведут себя не так, как другие гиперссылки, имеет смысл стилизовать их по-разному, просто как подсказку для пользователя. Возьмите Звонок это бизнес- ссылка:
<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;
}
Вы можете увидеть результат на рисунке ниже.
Чтобы сопоставить элементы, когда значение атрибута заканчивается подстрокой, измените ^$ Если по какой-то странной причине ― и позвольте мне подчеркнуть, что это было бы странно ―, мы хотели бы сопоставить последние четыре цифры нашего номера телефона (5555), мы могли бы использовать следующее:
[href$="5555"] {
background: #e91e63;
}
Очевидно, более полезно сопоставлять элементы, заканчивающиеся одинаковым суффиксом. Например, вы можете сопоставить <aside class="sports-sidebar"><aside class="arts-sidebar">[class$=sidebar]
Однако использование $=sports-sidebar-a Для этого нам нужно использовать последовательность *= Изменение нашего селектора на [class*=sidebar]
Большинство новых селекторов, добавленных в CSS3 и CSS4, вообще не являются селекторами атрибутов. Это псевдоклассы или псевдоэлементы. Мы обсудим это в следующих нескольких разделах.