Universal CSS selector to match any and all HTML data-* attributes

Question

Is it possible to match all nodes that have a data-* attribute using only CSS?

Here are examples of attributes I would like to match:

data-scope
data-sessionlink
data-visibility-tracking

I could do

*[data-scope] *[data-sessionlink] *[data-visibility-tracking]

but I am looking for something more compact. Furthermore, I don't know all possible data-* attributes I might encounter in my application.

Are these attributes or attribute values (e.g. Class="data-scope") — rsjaffe, Apr 26 '16 at 19:48
Dang. There's a wildcard search for attribute values starting with a string, but not, as far as I know, attributes. — rsjaffe, Apr 26 '16 at 19:53
Yes, I'm familiar with the wildcard attribute value selector, and I am not holding out much hope that what I would like to do is possible, but you never know until you ask others. — Vadim, Apr 26 '16 at 19:57
I'm not certain this is possible without the use of javascript — Shockwave, Apr 26 '16 at 20:47

score 3 · Accepted Answer · answered Apr 26 '16 at 23:11

3

It is currenly impossible to use wildcard masks to select elements by an attribute-name part.

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-*] { ... }

answered Apr 26 '16 at 23:11

Marat Tanalin

13,927
1
36
52

1

Thanks, Marat! I hope that one day we will be able to do wildcard selection on attribute names. – Vadim Apr 27 '16 at 12:20
Not the greatest idea though - won't allow you to do [data-my-*='exact match'] because *= clashes with an existing operator – gotofritz Jul 09 '17 at 14:57
1

@gotofritz Good point. But this could probably be resolved by wrapping the attribute name itself in quotes: `["data-my-*" = "exact match"]` – Marat Tanalin Jul 10 '17 at 11:54

Universal CSS selector to match any and all HTML data-* attributes

1 Answers1

Linked