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