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

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

[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.

Это отличное чтение о селекторах атрибутов

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.

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

Возможно ли выбирать элементы в CSS по их атрибутам данных HTML5? На этот вопрос легко ответить, просто попробовав, и ответ, конечно же, да. Но это неизменно приводит нас к следующему вопросу: «Следует ли выбирать элементы в CSS по их атрибутам данных HTML5?» По этому поводу существуют противоречивые мнения.

В лагере «нет» находится (или, по крайней мере, был в 2014 году) легенда CSS Гарри Робертс. В статье Именование компонентов пользовательского интерфейса в OOCSS он написал:

Важно отметить, что, хотя мы можем стилизовать HTML с помощью его атрибутов data- *, мы, вероятно, не должны этого делать. Атрибуты data- * предназначены для хранения данных в разметке, не для выбора. Это из Уровень жизни в HTML (выделено мной):

Атрибуты настраиваемых данных предназначены для хранения настраиваемых данных в частном порядке для страницы или приложения, для которых больше нет подходящих атрибутов или элементов.

Спецификация W3C на этот счет была удручающе расплывчатой, но, основываясь исключительно на том, что она сделала и не говорила, я думаю, что вывод Гарри был совершенно разумным.

С тех пор много из было высказано предположение, что использование настраиваемых атрибутов данных в качестве ловушек для стилизации совершенно уместно, включая руководство MDN, Использование атрибутов данных. Существует даже методология CSS под названием CUBE CSS, в которой перехватчик атрибутов данных является предпочтительным способом добавления стилей в компонент 'исключения '(известные как модификаторы в БЭМ).

К счастью, WHATWG HTML Living Standard с тех пор добавил еще несколько слов и даже несколько примеров (выделено мной):

Пользовательские атрибуты данных предназначены для хранения пользовательских данных, состояние, аннотации и т.п., частные для страницы или приложения, для которых больше нет подходящих атрибутов или элементов.

В этом примере пользовательские атрибуты данных используются для хранения результатов обнаружения функции для PaymentRequest, которую можно использовать в CSS для другого стиля страницы оформления заказа.

Авторы должны тщательно разрабатывать такие расширения, чтобы при игнорировании атрибутов и удалении любого связанного CSS страницу можно было использовать.

TL; DR: Да, можно использовать атрибуты data-* в селекторах CSS при условии, что страницу можно использовать без них.