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.
Wildcard selectors allow you to select multiple matching elements. In CSS, three wildcard selectors exist i.e. $, ^, and * The * wildcard is known as the containing wildcard since it selects elements containing the set value. With the ^ wildcard, you get to select elements whose attribute value starts with the set ...
Your answerAsterisk (*): It is used for replacing 1 or more characters from a selector attribute.
The asterisk (*) is known as the CSS universal selectors. It can be used to select any and all types of elements in an HTML page. The asterisk can also be followed by a selector while using to select a child object. This selector is useful when we want to select all the elements on the page.
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-*] { ... }
No, there is no wildcarding for attribute names in CSS selectors. All attribute selectors contain a specific name of an attribute.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With