Select elements by data attribute in CSS

Question

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

Answer 1

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.

Answer 2

It's also possible to select attributes regardless of their content, in modern browsers

with:

[data-my-attribute] {
   /* Styles */
}

[anything] {
   /* Styles */
}

For example: http://codepen.io/jasonm23/pen/fADnu

Works on a very significant percentage of browsers.

Note this can also be used in a JQuery selector, or using document.querySelector

Answer 3

It's worth noting CSS3 substring attribute selectors

[attribute^=value] { /* starts with selector */
/* Styles */
}

[attribute$=value] { /* ends with selector */
/* Styles */
}

[attribute*=value] { /* contains selector */
/* Styles */
}

Answer 4

You can combine multiple selectors and this is so cool knowing that you can select every attribute and attribute based on their value like href based on their values with CSS only..

Attributes selectors allows you play around some extra with id and class attributes

Here is an awesome read on Attribute Selectors

Fiddle

a[href="http://aamirshahzad.net"][title="Aamir"] {
  color: green;
  text-decoration: none;
}

a[id*="google"] {
  color: red;
}

a[class*="stack"] {
  color: yellow;
}

<a href="http://aamirshahzad.net" title="Aamir">Aamir</a>
<br>
<a href="http://google.com" id="google-link" title="Google">Google</a>
<br>
<a href="http://stackoverflow.com" class="stack-link" title="stack">stack</a>

Browser support:
IE6+, Chrome, Firefox & Safari

You can check detail here.

Answer 5

CSS attribute selectors with small snippet and working examples

1 - [attribute~="value"]

2 - [attribute^="value"]

3 - [attribute$="value"]

4 - [attribute|="value"]

5 - [attribute*="value"]

/* Seven (because it search in all words)*/
div[class="items"] {
  color: red;
}

<div class="items-group">One</div>
<div class="groupitems">Two</div>
<div class="itemsgroup">Three</div>
<div class="group-items">Four</div>
<div class="items group">Five</div>
<div class="group items">Six</div>
<div class="items">Seven</div>

~ is used to select elements with an attribute value containing a specified word

/* Five Six Seven (because it search in all words)*/
div[class~="items"] {
  color: red;
}

<div class="items-group">One</div>
<div class="groupitems">Two</div>
<div class="itemsgroup">Three</div>
<div class="group-items">Four</div>
<div class="items group">Five</div>
<div class="group items">Six</div>
<div class="items">Seven</div>

^ is used to select elements whose attribute value begins with a specified value.

/* One Three Five Seven (because it search in beginning)*/
div[class^="items"] {
  color: red;
}

<div class="items-group">One</div>
<div class="groupitems">Two</div>
<div class="itemsgroup">Three</div>
<div class="group-items">Four</div>
<div class="items group">Five</div>
<div class="group items">Six</div>
<div class="items">Seven</div>

$ selector is used to select elements whose attribute value ends with a specified value.

/* Two Four Six Seven (Because it search from end) */
div[class$="items"] {
  color: red;
}

<div class="items-group">One</div>
<div class="groupitems">Two</div>
<div class="itemsgroup">Three</div>
<div class="group-items">Four</div>
<div class="items group">Five</div>
<div class="group items">Six</div>
<div class="items">Seven</div>

| is used to select elements with the specified attribute starting with the specified value.

/* One Seven (because it start from beggining and search -(hyphen)). ignore started from end */
div[class|="items"] {
  color: red;
}

<div class="items-group">One</div>
<div class="groupitems">Two</div>
<div class="itemsgroup">Three</div>
<div class="group-items">Four</div>
<div class="items group">Five</div>
<div class="group items">Six</div>
<div class="items">Seven</div>

* is used to select elements whose attribute value contains a specified value.

/* One Two Three Four Five Six (because it search all group)*/ 
div[class*="group"] {
  color: red;
}

<div class="items-group">One</div>
<div class="groupitems">Two</div>
<div class="itemsgroup">Three</div>
<div class="group-items">Four</div>
<div class="items group">Five</div>
<div class="group items">Six</div>
<div class="items">Seven</div>