2

I'd like to select things similarly to how classes are selected (but I would like to use other attributes). In the same way that class='item-button item-button-selected' can be selected with both .item-button and .item-button-selected.

1 Answer 1

2

The equivalent of an HTML class selector for any attribute is [attribute~=value], matching one of a set of space-separated values:

[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

In case you're worried about specificity (if this is a non-CSS use case, you don't need to worry), attribute selectors and class selectors are equally specific.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.