Можно ли выбрать элементы в CSS с помощью атрибутов данных HTML5 (например, data-role
)?
Если вы имеете в виду использование селектора атрибутов, обязательно, почему бы и нет:
[data-role="page"] {
/* Styles */
}
Существует множество селекторов атрибутов, которые вы можете использовать для различных сценариев, которые описаны в документе, на который я ссылаюсь. Обратите внимание, что, несмотря на то, что атрибуты пользовательских данных являются "новой функцией HTML5",
У браузеров обычно нет проблем с поддержкой нестандартных атрибутов, поэтому вы должны иметь возможность фильтровать их с помощью селекторов атрибутов; и
вам также не нужно беспокоиться о проверке CSS, поскольку CSS не заботится об именах имен, не связанных с именами, если они не нарушают синтаксис селектора.
Также возможно выбирать атрибуты независимо от их содержимого, в современных браузерах
с:
[data-my-attribute] {
/* Styles */
}
[anything] {
/* Styles */
}
Например: http://codepen.io/jasonm23/pen/fADnu
Работает с очень значительным процентом браузеров.
Примечание. Это также можно использовать в селекторе JQuery или с помощью document.querySelector
Стоит отметить селекторы атрибутов подстроки CSS3
[attribute^=value] { /* starts with selector */
/* Styles */
}
[attribute$=value] { /* ends with selector */
/* Styles */
}
[attribute*=value] { /* contains selector */
/* Styles */
}
Вы можете комбинировать несколько селекторов, и это так здорово, зная, что вы можете выбрать каждый атрибут и атрибут на основе их значения, например 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
Вы можете проверить подробности здесь.