Can You Target Elements Based on the Presence of Any 'data-*” Attribute with CSS?

Attribute Name Selection with Wildcarding

In web development, CSS selectors offer precise control over HTML elements based on their attributes. Among the various attribute-based selectors, there exists a specific need for targeting elements that possess any "data-*" attribute. While various methods exist for selecting elements based on the attribute's value, the question arises: can we target elements solely based on the presence of any "data" attribute?

To understand the current possibilities, let's examine the existing attribute value-based selectors:

• Exact Match: Selects elements where the attribute value equals a specified value ([data-something="value"]).
• Partial Match (Start): Selects elements where the attribute value starts with a specified prefix ([data-something^="value"]).
• Partial Match (End): Selects elements where the attribute value ends with a specified suffix ([data-something$="value"]).
• Partial Match (Anywhere): Selects elements where the attribute value contains a specified substring ([data-something*="value"]).

However, for the specific case of targeting elements based on the attribute name itself, there is only a single option:

• Attribute Name Present: Selects elements that possess a specific attribute ([data-something]).

Unfortunately, there are currently no wildcard selectors for attribute names, such as [data-*]. This means that it is not possible to target elements that have any "data" attribute using CSS alone.

Nevertheless, there are ongoing efforts within the Selectors Level 3 Specification to introduce wildcarding capability for attribute names. A proposed syntax that has gained traction is:

• x-admin-*: Selects elements with an attribute name starting with "x-admin-".
• [data-my-*]: Selects elements with an attribute name starting with "data-my-".

While these selectors are not yet part of the standard, they demonstrate the potential for wildcarding attribute names in the future.

The above is the detailed content of Can You Target Elements Based on the Presence of Any 'data-*” Attribute with CSS?. For more information, please follow other related articles on the PHP Chinese website!