Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS selector for attribute names based on a wildcard

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.

like image 628
Shawn Taylor Avatar asked Jan 19 '14 20:01

Shawn Taylor


People also ask

Can you use wildcard in CSS selector?

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

What selector is used as a wildcard character?

Your answerAsterisk (*): It is used for replacing 1 or more characters from a selector attribute.

What is the use of * in CSS?

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.


2 Answers

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-*] { ... } 
like image 70
Michael Benjamin Avatar answered Sep 22 '22 19:09

Michael Benjamin


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

like image 45
Jukka K. Korpela Avatar answered Sep 21 '22 19:09

Jukka K. Korpela