Есть много способов выбора элементов в CSS. Самый простой выбор - по имени тега, например p ( ). Почти все, что более конкретно, чем селектор тегов, использует атрибуты - classи IDоба выбирают эти атрибуты в элементах HTML. Но classи IDэто не единственные атрибуты, которые могут выбрать разработчики. Мы можем использовать любой атрибут элемента в качестве селектора.
Выбор атрибута имеет особый синтаксис. Вот пример:
a(href="https://css-tricks.com") ( color: #E18728; )Это селектор точного соответствия , который будет выбирать только ссылки с точным hrefзначением атрибута «https://css-tricks.com».
Семь различных типов
Селекторы атрибутов по умолчанию чувствительны к регистру (см. Сравнение без учета регистра ниже) и записываются в скобки ().
Существует семь различных типов совпадений, которые можно найти с помощью селектора атрибутов, и для каждого из них используется свой синтаксис. Каждый из более сложных селекторов атрибутов основан на синтаксисе селектора точного соответствия - все они начинаются с имени атрибута и заканчиваются знаком равенства, за которым следует значение (я) атрибута, обычно в кавычках. Что находится между именем атрибута и знаком равенства - вот что отличает селекторы.
(data-value) ( /* Attribute exists */ ) (data-value="foo") ( /* Attribute has this exact value */ ) (data-value*="foo") ( /* Attribute value contains this value somewhere in it */ ) (data-value~="foo") ( /* Attribute has this value in a space-separated list somewhere */ ) (data-value^="foo") ( /* Attribute value starts with this */ ) (data-value|="foo") ( /* Attribute value starts with this in a dash-separated list */ ) (data-value$="foo") ( /* Attribute value ends with this */ )Значение содержит: значение атрибута содержит термин как единственное значение, значение в списке значений или как часть другого значения. Чтобы использовать этот селектор, добавьте звездочку (*) перед знаком равенства. Например, img(alt*="art")выберет изображения с замещающим текстом «абстрактное искусство» и «спортсмен, начинающий новый вид спорта», потому что значение «искусство» содержится в слове «начало».
Значение находится в списке, разделенном пробелами: значение является либо единственным значением атрибута, либо целым значением в наборе значений, разделенных пробелами. В отличие от селектора «содержит», этот селектор не будет искать значение как фрагмент слова. Чтобы использовать этот селектор, добавьте тильду (~) перед знаком равенства. Например, img(alt~="art")выберет изображения с альтернативным текстом «абстрактное искусство» и «художественное шоу», но не «спортсмен, начинающий новый вид спорта» (который выберет селектор «содержит»).
Значение начинается с: значение атрибута начинается с выбранного термина. Чтобы использовать этот селектор, добавьте курсор (^) перед знаком равенства. Не забывайте, чувствительность к регистру имеет значение. Например, img (alt = "искусство") выберет изображения с замещающим текстом "арт-шоу" и "художественный узор", но не изображение с замещающим текстом "Артур Миллер", потому что "Артур" начинается с заглавной буквы. .
Значение находится первым в списке, разделенном тире: этот селектор очень похож на селектор «начинается с». Здесь селектор соответствует значению, которое является либо единственным значением, либо первым в списке значений, разделенных тире. Чтобы использовать этот селектор, добавьте вертикальную черту (|) перед знаком равенства. Например, li(data-years|="1900")выберет элементы списка со data-yearsзначением «1900-2000», но не элемент списка со data-yearsзначением «1800-1900».
Значение заканчивается на: значение атрибута заканчивается выбранным термином. Чтобы использовать этот селектор, добавьте знак доллара ($) перед знаком равенства. Например, a(href$="pdf")выбирает каждую ссылку, которая заканчивается на .pdf.
Замечание о кавычках: в некоторых случаях вы можете обойтись без кавычек, но правила выбора без кавычек несовместимы между браузерами. Цитаты всегда работают, поэтому, если вы будете их использовать, можете быть уверены, что ваш селектор сработает.
См. Селекторы атрибутов пера от CSS-Tricks (@ css-tricks) на CodePen.
Интересный факт: значения обрабатываются как строки, поэтому вам не нужно делать какие-либо причудливые экранирования символов, чтобы они совпадали, как если бы вы использовали необычные символы в селекторе классов или идентификаторов.
(class="(╯°□°）╯︵ ┻━┻")( color: red; font-weight: bold; )Сравнение без учета регистра
Селекторы атрибутов без учета регистра являются частью спецификации Selectors Level 4 рабочей группы CSS. Как упоминалось выше, строки значений атрибутов по умолчанию чувствительны к регистру, но их можно изменить на нечувствительность к регистру, добавив iнепосредственно перед закрывающей скобкой:
(attribute="value" i) ( /* Styles here will apply to elements with: attribute="value" attribute="VaLuE" attribute="VALUE"… etc */ )Сопоставление без учета регистра может быть действительно удобным для нацеливания на атрибуты, содержащие непредсказуемый, написанный человеком текст. Например, предположим, что вы создаете речевой пузырь в приложении чата и хотите добавить «машущую руку» к любым сообщениям с текстом «привет» в той или иной форме. Вы можете сделать это только с помощью CSS, используя сопоставление без учета регистра, чтобы уловить все возможные варианты:
См. Сопоставление атрибутов CSS без учета регистра Pen с помощью CSS-Tricks (@ css-tricks) на CodePen.
Объединяя их
Вы можете комбинировать селектор атрибутов с другими селекторами, такими как тег, класс или идентификатор.
div(attribute="value") ( /* style rules here */ ) .module(attribute="value") ( /* style rules here */ ) #header(attribute="value") ( /* style rules here */ )Или даже объедините несколько селекторов атрибутов. В этом примере выбираются изображения с текстом альт , который включает в себя слово «человек» в качестве единственного значения или значения в список разделенных пробелами, и в srcзначение , которое включает в себя значение «Lorem»:
img(alt~="person")(src*="lorem") ( /* style rules here */ )См. Раздел «Комбинированные атрибуты пера и выбор только атрибутов с помощью CSS-трюков» (@ css-tricks) на CodePen.
Селекторы атрибутов в JavaScript и jQuery
Селекторы атрибутов можно использовать в jQuery, как и любой другой селектор CSS. В JavaScript вы можете использовать селекторы атрибутов с помощью document.querySelector()и document.querySelectorAll().
См. Селекторы атрибутов пера в JS и jQuery от CSS-Tricks (@ css-tricks) на CodePen.
Связанный
- учебный класс
- Я БЫ
Дополнительная информация
- Тощие селекторы атрибутов
- Селекторы атрибутов в MDN
- Селекторы атрибутов в спецификации W3C CSS
Поддержка браузера
| Хром | Сафари | Fire Fox | Опера | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Любой | Любой | Любой | Любой | 7+ | Любой | Любой |