Can CSS Select Elements Based on HTML5 Data Attributes?

Selecting Elements by HTML5 Data Attributes in CSS

Question: Can elements be selected in CSS based on their data- attributes (e.g., data-role)?

Answer: Utilizing an attribute selector, selecting elements based on their HTML5 data attributes is certainly feasible. Consider the following example:

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

Versatility of Attribute Selectors:
CSS offers a plethora of attribute selectors to accommodate diverse scenarios, as detailed in the linked documentation.

Browser Support and CSS Validation:
It's noteworthy that while custom data attributes are an HTML5 feature, browsers generally support non-standard attributes. This means that you can successfully filter these attributes using attribute selectors. Moreover, CSS validation remains unaffected, as it is unconcerned with attribute names outside the namespace, provided they adhere to selector syntax.

The above is the detailed content of Can CSS Select Elements Based on HTML5 Data Attributes?. For more information, please follow other related articles on the PHP Chinese website!