CODEWITHSUNDEEP
htmlcss-selectors
0x777C
0x777C

Reputation: 1047

What is the equivalent of the '.' CSS selector for any attribute?

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.

Upvotes: 2

Views: 85

Answers (1)

BoltClock
BoltClock

Reputation: 724452

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.

Upvotes: 2

Related Questions