Menu
Is it possible to select elements in CSS by their HTML5 data attributes (for example, data-role)?
973
The [attribute|="value"] selector is used to select elements with the specified attribute, whose value can be exactly the specified value, or the specified value followed by a hyphen (-). Note: The value has to be a whole word, either alone, like class="top", or followed by a hyphen( - ), like class="top-text".
The [attribute=value] selector is used to select elements with the specified attribute and value.
CSS attribute selector is used to targeting an input text fields. The input text fields of type 'text' can be targeting by using input[type=text].
CSS [attribute~=value] Selector The [attribute~=value] selector is used to select elements with an attribute value containing a specified word.
If you mean using an attribute selector, sure, why not:
[data-role="page"] { /* Styles */ } There are a variety of attribute selectors you can use for various scenarios which are all covered in the document I link to. Note that, despite custom data attributes being a "new HTML5 feature",
browsers typically don't have any problems supporting non-standard attributes, so you should be able to filter them with attribute selectors; and
you don't have to worry about CSS validation either, as CSS doesn't care about non-namespaced attribute names as long as they don't break the selector syntax.
148
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
