Styjun

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.

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

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

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

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