Выбор элементов по атрибуту данных в CSS

488

Можно ли выбирать элементы в CSS по их атрибутам данных HTML5 (например, data-role)?

776

Если вы имеете в виду использование селектора атрибута , то почему бы и нет:

[data-role="page"] {
    /* Styles */
}

Существует множество селекторов атрибутов, которые вы можете использовать для различных сценариев, которые описаны в документе, на который я ссылаюсь. Обратите внимание, что, несмотря на то, что пользовательские атрибуты данных являются «новой функцией HTML5»,

браузеры обычно не имеют проблем с поддержкой нестандартных атрибутов, поэтому вы должны иметь возможность фильтровать их с помощью селекторов атрибутов; а также
Вам также не нужно беспокоиться о проверке CSS, так как CSS не заботится об именах атрибутов без пространства имен, если они не нарушают синтаксис селектора.

— BoltClock
источник

4

Совместим со всеми навигаторами?

— Кристоф Дебов,

21

@Christophe Debove: IE7 + и все остальное.

— BoltClock

7

CSS, похоже, не обнаруживает это, если атрибут данных установлен или изменен с помощью JS.

— ʙᴀᴋᴇʀ ʙᴀᴋᴇʀ

30

После дальнейших исследований выяснилось $("#element").data("field","value");, что значение атрибутов данных не изменяется, оно только изменяет кэшированную версию jQuery DOM. Для изменения фактического атрибута DOM необходимо использовать $("#element").attr("data-field","value");. Сделав мой оригинальный комментарий недействительным.

— ʙᴀᴋᴇʀ ʙᴀᴋᴇʀ

2

Да, похоже, что изменение набора данных тоже работает @Matthew - jsfiddle.net/BoltClock/k378xgj3 Спасибо, jQuery.

— BoltClock

107

В современных браузерах также можно выбирать атрибуты независимо от их содержимого.

с:

[data-my-attribute] {
   /* Styles */
}

[anything] {
   /* Styles */
}

Например: http://codepen.io/jasonm23/pen/fADnu

Работает на очень значительном проценте браузеров.

Обратите внимание, что это также можно использовать в селекторе JQuery или с помощью document.querySelector

— ocodo
источник

Вау, я никогда не видел, чтобы это можно было использовать так !! +1! И FWIW, теперь, когда истек срок действия браузеров, я считаю, что он работает в IE7 +, поэтому его поддержка в значительной степени вездесуща. Забавно, что даже Крис Койер не упомянул об этом здесь

— Камило Мартин

Спасибо @CamiloMartin. Я удалил ссылку browsershots, чтобы избежать путаницы / раздражения.

— ocodo

Добавлена ссылка на ветку Криса Койера css-tricks.com/attribute-selectors/#comment-965838 @CamiloMartin

— ocodo

1

В любом случае, этот синтаксис не является новым - все больше людей были удивлены тем, что IE6 не поддерживает его, чем IE7 +. Вы можете в значительной степени предположить, что все селекторы CSS2.1 поддерживаются в IE8 и более поздних версиях - IE7 делает большинство, хотя и с некоторыми неясными ошибками. Все современные браузеры некоторое время поддерживали селекторы уровня 3, вместо этого Chrome был глючным.

— BoltClock

1

Поскольку мы говорим о селекторах атрибутов, интересно отметить, что селекторы атрибутов подстроки, представленные на уровне 3 ( ^=, *=и $=), также поддерживаются IE7 и IE8. Может быть, они были введены в IE до стандартизации.

— BoltClock

47

Стоит отметить селекторы атрибутов подстроки CSS3

[attribute^=value] { /* starts with selector */
/* Styles */
}

[attribute$=value] { /* ends with selector */
/* Styles */
}

[attribute*=value] { /* contains selector */
/* Styles */
}

— Матас Вайткявичюс
источник

13

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

Атрибуты селекторы позволяет играть вокруг некоторой дополнительной с idиclass атрибуты

Вот отличная статья о селекторах атрибутов

скрипка

a[href="http://aamirshahzad.net"][title="Aamir"] {
  color: green;
  text-decoration: none;
}

a[id*="google"] {
  color: red;
}

a[class*="stack"] {
  color: yellow;
}

<a href="http://aamirshahzad.net" title="Aamir">Aamir</a>
<br>
<a href="http://google.com" id="google-link" title="Google">Google</a>
<br>
<a href="http://stackoverflow.com" class="stack-link" title="stack">stack</a>

Развернуть фрагмент

Поддержка браузера:
IE6 +, Chrome, Firefox и Safari

Вы можете проверить детали здесь .

— Аамир Шахзад
источник

4

    [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 */
}

— Навед хан
источник