Can CSS Selectors Target Elements with Any \'data\' Attribute?

Wildcard Selectors for Attribute Names

Question:

Is there a way to use CSS selectors to target elements that have any "data" attribute, regardless of its specific name?

Answer:

Currently, there is no built-in wildcard selector in CSS that targets attribute names. However, there is a single way to select elements with a specific attribute name:

E[foo]

This selector selects elements with the "foo" attribute, regardless of its value.

Extended Discussion:

While wildcard selection for attribute values is supported through various operators, such as *= and ^=, there is no equivalent for wildcarding attribute names. Proposals have been made for such a syntax, including:

x-admin-* { ... }
[data-my-*] { ... }

However, these are not yet standardized and are subject to browser support.

Additional Notes:

• The W3C Selectors Level 3 Specification does not include wildcarding for attribute names.
• Attempts to create wildcard selectors for attribute names, such as [data-*] or [data-^], will not work.

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