csshtmlcss-selectorscustom-data-attribute

Select elements by attribute in CSS


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


Solution

  • 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",