Select elements by attribute in CSS

css html css-selectors custom-data-attribute
Diogo Cardoso picture Diogo Cardoso · Mar 16, 2011 · Viewed 340k times · Source

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

Answer

BoltClock picture BoltClock · Mar 16, 2011

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.

Related questions

CSS data attribute conditional value selector?

Given html such as : <div data-points="800">Jonh</div> <div data-points="200">Jack</div> <div data-points="1200">Julian</div> How to select elements were the value is superior to 1000 (x>1000) ? …

Read More
CSS selector for custom data-attribute?

Why my star is not appearing in YELLOW ? How to fix it ? Here's the relevant code for the above issue. HTML <div class="tpl" data-favorite="1"> <div> <span class="favorite">★</span> <span …

Read More
Can I write a CSS selector selecting elements NOT having a certain class or attribute?

I would like to write a CSS selector rule that selects all elements that don't have a certain class. For example, given the following HTML: <html class="printable"> <body class="printable"> <h1 class="printable">…

Read More