Can CSS Attribute Selectors Target HTML5 Data Attributes Like `data-role`?

CSS Attribute Selectors for HTML5 Data Attributes

Question:

Can CSS attribute selectors be used to target elements based on their HTML5 data attributes, such as data-role?

Answer:

Absolutely. Using attribute selectors, you can easily select elements based on their data attributes. Here's an example:

[data-role="page"] {
    /* Styles */
}

This selector targets any element with the custom attribute data-role set to the value "page". Note that the attribute name should be enclosed in square brackets.

Attribute Selector Types:

There are various types of attribute selectors that can be used for different scenarios:

• [name="value"]: Matches elements where the attribute name has the exact value "value".
• [name]: Matches elements where the attribute name exists regardless of its value.
• [name~="value"]: Matches elements whose attribute name has a value that contains the substring "value".
• [name^="value"]: Matches elements whose attribute name starts with the substring "value".
• [name$="value"]: Matches elements whose attribute name ends with the substring "value".

Browser Support:

Most modern browsers support attribute selectors, including those for custom data attributes. However, it's worth noting that CSS validation doesn't consider non-namespaced attribute names, so these selectors should not cause validation issues.

The above is the detailed content of Can CSS Attribute Selectors Target HTML5 Data Attributes Like `data-role`?. For more information, please follow other related articles on the PHP Chinese website!