Блог

Я хотел бы выбирать вещи аналогично тому, как выбираются классы (но я хотел бы использовать другие атрибуты). Таким же образом, который class='item-button item-button-selected' может быть выбран с помощью обоих .item-button и .item-button-selected .

Эквивалентом селектора класса HTML для любого атрибута является [attribute~=value] , соответствующий одному из набора значений, разделенных пробелом:

 [data-foo~="a"] {
  color: red;
}

[data-foo~="a"][data-foo~="b"] {
  color: blue;
}  

 <p data-foo="a">a
<p data-foo="a b">a b
<p data-foo="b">b  

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