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

Ответ 1

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

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

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

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

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

Ответ 2

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

с:

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

[anything] {
   /* Styles */
}

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

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

Примечание. Это также можно использовать в селекторе JQuery или с помощью document.querySelector

Ответ 3

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

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

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

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

Ответ 4

Вы можете комбинировать несколько селекторов, и это здорово, зная, что вы можете выбрать каждый атрибут и атрибут на основе их значения, например 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>

Ответ 5

Селекторы атрибутов CSS с небольшим фрагментом и рабочими примерами

1 - [attribute ~ = "value"]

2 - [attribute ^ = "value"]

3 - [attribute $ = "value"]

4 - [attribute | = "value"]

5 - [attribute * = "value"]

/* Seven (because it search in all words)*/
div[class="items"] {
  color: red;
}

<div class="items-group">One</div>
<div class="groupitems">Two</div>
<div class="itemsgroup">Three</div>
<div class="group-items">Four</div>
<div class="items group">Five</div>
<div class="group items">Six</div>
<div class="items">Seven</div>