CSS selector for attribute names based on a wildcard

Question

I've recently been doing a little studying on CSS selectors and have run into a question regarding the new "data-*" attributes.

I understand that in order to select elements with a data attribute there are a few ways of going about it:

[data-something='value']{...}    // data-something has value = 'value'
[data-something^='value']{...}   // data-something has value that STARTS with 'value'
[data-something*='value']{...}   // data-something has value with 'value SOMEWHERE in it

There are other variations of these, but my question pertains to CSS selectors that can target elements that simply HAVE a "data" attribute. More specifically, is there a CSS selector that can target elements that have ANY "data" attribute at all?

While incorrect, I'm thinking of something like:

[data]{...}

I've been searching through Google but haven't found anything regarding a generic selector for the attribute yet.

It would be cool if you could do something like `[data-*]`.. — Josh Crozier, Jan 19 '14 at 20:43
Are you using vanilla CSS or are you using some kind of pre-compiler like LESS, Stylus, etc...? — arb, Jan 19 '14 at 20:45
I figured there would be a way of imitating this behavior in SASS or LESS, but I've only been looking for a vanilla CSS method so far. — Shawn Taylor, Jan 19 '14 at 20:46
I am pretty sure this is impossible with just CSS, you could however add JavaScript to dynamically add a class to all elements that have `data-*` attrinutes. Just out of curiosity: why would you want to do that? — Cu3PO42, Jan 19 '14 at 20:48
@Zero21xxx I don't think a preprocessor would help here, because a preprocessor ultimately doesn't extend the capabilities of CSS, it just makes writing it easier. There is in infinite number of possible `data` attributes, so you can't specify them all, unless you know exactly which ones may occur. — Cu3PO42, Jan 19 '14 at 20:50
Yea, I haven't found any vanilla CSS solution yet...I don't have a particular use case. I'm working through learning CSS selectors right now and got a little tripped up on whether or not this is possible. — Shawn Taylor, Jan 19 '14 at 20:51
Yeah I was just wondering if there was a finite numbers of these so you could write some sort of CSS function or mix-in. But you're right, that would only help if there was a finite list. — arb, Jan 19 '14 at 21:04
Actually, can you clarify if you are looking for all elements that have `data` specifically (as an attribute)? Or that *contain* `data` *as part of a longer/larger attribute name*? — TylerH, Dec 31 '20 at 22:31

score 36 · Answer 1 · edited May 23 '17 at 11:46

As you have pointed out, there are multiple ways to target the value of an HTML attribute.

E[foo="bar"]

an E element whose "foo" attribute value is exactly equal to "bar"

E[foo~="bar"]

an E element whose "foo" attribute value is a list of whitespace-separated values, one of which is exactly equal to "bar"

E[foo^="bar"]

an E element whose "foo" attribute value begins exactly with the string "bar"

E[foo$="bar"]

an E element whose "foo" attribute value ends exactly with the string "bar"

E[foo*="bar"]

an E element whose "foo" attribute value contains the substring "bar"

E[foo|="en"]

an E element whose "foo" attribute has a hyphen-separated list of values beginning (from the left) with "en"

But there is only one way to target the attribute name itself:

E[foo]

an E element with a "foo" attribute

Hence, there are currently no methods for wildcarding attribute names:

div[data-*] { ... } /* may be useful, but doesn't exist */
div[data-^] { ... } /* may be useful, but doesn't exist */

_{source: W3C Selectors Level 3 Specification}

From another answer to a similar question:

There is a recent thread in the www-style@w3.org mailing list, where Simon Pieters from Opera has proposed a nice possible syntax that has got some acceptance in the thread, so there is a chance that it will become standard somewhen in the future:
x-admin-* { ... }
[data-my-*] { ... }

score 17 · Accepted Answer · edited Dec 31 '20 at 22:28

17

No, there is no wildcarding for attribute names in CSS selectors. All attribute selectors contain a specific name of an attribute.

edited Dec 31 '20 at 22:28

TylerH

20,799
66
75
101

answered Jan 19 '14 at 21:15

Jukka K. Korpela

195,524
37
270
390

4

Because the original question requires the wildcard to work on the attribute itself. For instance, a CSS rule that aims to style all attributes that begin with [custom-*] - where the asterisk (*) represents the wildcard. This is not possible. – CodeUK Oct 06 '18 at 23:04
Who else imagined for sure they'd done this before and is now very disappointed! – Simon_Weaver May 24 '21 at 00:09

score 0 · Answer 3 · answered Aug 25 '23 at 13:07

For the data- attribute there is the attribute 'data-set' which contains a list of all data-* attributes in a single string. Acting on it with the existing wildcard operators MIGHT be solution:

[data-set*="bar:"]

would select an element with the data-bar attribute (even with an empty value!), but also if there is a data-foobar attribute (the ':' is there to ensure it is an attribute name, not an attribute value)

score -7 · Answer 4 · edited Dec 31 '20 at 22:11

-7

YES, you can select all elements that have any value of a specified attribute:

[type] selects all elements that have a type="anything" attribute

edited Dec 31 '20 at 22:11

TylerH

20,799
66
75
101

answered Apr 13 '17 at 18:21

Joshua Copeland

11
3

5

It's rightly downvoted because it is not answering the question about wildcard attribute name. – Asaf Agranat Dec 09 '18 at 16:00

CSS selector for attribute names based on a wildcard

4 Answers4

Linked

Related