Can CSS Selectors Target Elements with Wildcard Attribute Names?

CSS Selectors for Attribute Names Based on Wildcard

Selecting elements based on their "data-*" attributes in CSS can be achieved through various methods. However, a common question arises regarding targeting elements with any "data" attribute irrespective of its specific name.

Current Limitations:

Unfortunately, there is currently no CSS selector available that can target elements with an attribute name matching any wildcard. The available syntax focuses on targeting the attribute value, not the name itself.

Attribute Name Targeting:

The only way to target an attribute name in CSS is through the syntax:

E[foo]

This selector will select all elements with a "foo" attribute, regardless of its value.

Wildcard Alternatives:

Despite the lack of a wildcard attribute name selector, a recent thread in the [email protected] mailing list has proposed a potential syntax:

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

This proposed syntax has gained some acceptance and may become a standard in the future. However, at present, it remains unsupported and is not a viable solution for targeting attribute names with wildcard characters.

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