Выбор элементов по атрибуту данных в CSS - PullRequest
Новая
       25

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

444 голосов
/ 16 марта 2011

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

Ответы [ 4 ]

706 голосов
/ 16 марта 2011

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

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

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

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

  • вам также не нужно беспокоиться о проверке CSS, поскольку CSS не заботится о именах атрибутов без пространства имен, если они не нарушают синтаксис селектора.

99 голосов
/ 12 сентября 2013

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

с: 

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

[anything] {
   /* Styles */
}

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

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

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

39 голосов
/ 18 мая 2015

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

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

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

[attribute*=value] { /* contains selector */
/* Styles */
}
12 голосов
/ 30 марта 2016

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

Атрибуты селекторов позволяют вам поэкспериментировать с id и class атрибутами

Вот отличное прочтение Селекторы атрибутов

Fiddle 

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

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

...