Overview

Attribute selectors can be used with various types of operators that change the selection criteria accordingly. They select an element using the presence of a given attribute or attribute value.

Selector(1) | Matched element | Selects elements… | CSS Version –: | — | — | :–: [attr] | <div attr> | With attribute attr | 2 [attr='val'] | <div attr="val"> | Where attribute attr has value val | 2 [attr~='val'] | <div attr="val val2 val3"> | Where val appears in thewhitespace-separated list of attr | 2 [attr^='val'] | <div attr="val1 val2"> | Where attr’s value begins with val | 3 [attr$='val'] | <div attr="sth aval"> | Where the attr’s value ends with val | 3 [attr*='val'] | <div attr="somevalhere"> | Where attr contains val anywhere | 3 [attr|=‘val’] | <div attr="val-sth etc"> | Where attr’s value is exactly val,or starts with val and immediatelyfollowed by \\- (U+002D) |2 [attr=‘val’ i] | <div attr=“val”> | Where attr has value val,ignoring val’s letter casing. | 4(2)

Notes:

1. The attribute value can be surrounded by either single-quotes or double-quotes. No quotes at all may also work, but it’s not valid according to the CSS standard, and is discouraged.
2. There is no single, integrated CSS4 specification, because it is split into separate modules. However, there are “level 4” modules. See browser support.

Details

[attribute]

Selects elements with the given attribute.

div[data-color] {
  color: red;
}

<div data-color="red">This will be red</div>
<div data-color="green">This will be red</div>
<div data-background="red">This will NOT be red</div>

Live Demo on JSBin

[attribute="value"]

Selects elements with the given attribute and value.

div[data-color="red"] {
  color: red;
}

<div data-color="red">This will be red</div>
<div data-color="green">This will NOT be red</div>
<div data-color="blue">This will NOT be red</div>

Live Demo on JSBin

[attribute*="value"]

Selects elements with the given attribute and value where the given attribute contains the given value anywhere (as a substring).

[class*="foo"] {
  color: red;
}