I have an HTML element with an attribute that contains hyphen-separated values:

<div data-tags="34-446-15-2915-159"></div>

I want to write a CSS selector that matches when a specific value, (IE: 15), appears anywhere in the list. Essentially, I'm looking for the ~= operator, only for hyphens instead of spaces.

I've tried a few methods for matching, but each had issues.

/* Matches data-tags="159" (too broad) */ [data-tags*="15"] /* Doesn't match data-tags="34-15" (Only matches value is first) */ [data-tags|="15"] /* Doesn't match data-tags="15" (Fails at start or end of list) */ [data-tags*="-15-"]

Is there a CSS selector that can match a single value within a hyphen-delimited attribute value?

Stevoisiak's user avatar

1

Building on DBS's comment, a hyphen-delimited can be done with 3 selectors for the start, middle, and end of the attribute value.

[data-tags|="15"], [data-tags*="-15-"], [data-tags$="-15"]

The |= selector handles both tag lists starting with 15 and those with 15 as the first element.

Represents elements with an attribute name of attr whose value can be exactly value or can begin with value immediately followed by a hyphen, - (U+002D).

Stevoisiak's user avatar

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.