Friday, 7 October 2016

html - Select elements by data attribute in CSS




Is it possible to select elements in CSS by their HTML5 data attributes (for example, data-role)?


Answer



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.



No comments:

Post a Comment

c++ - Does curly brackets matter for empty constructor?

Those brackets declare an empty, inline constructor. In that case, with them, the constructor does exist, it merely does nothing more than t...