Attribute selectors let us select elements with certain attributes or attributes of a certain value.

HTML elements can have attributes, which are additional values for configuration or modifying their behaviour. There is a long list of HTML attributes and not all of them are applicable to all elements. Attributes that are not relevant to an element simply have no effect on it.

Regardless of whether the attribute is correctly applied or not, you can still select it via CSS. But it is really bad practice to have invalid HTML anywhere on your site, simply because different browsers interpret invalid HTML differently. Then you can’t blame the browsers for rendering your site weird, they’re simply trying to fill the gaps to account for your incorrect code.

Attribute values must be identifiers or strings. The specification is rather ambiguous as it states that the case-sensitivity of attribute names and values in selectors depends on the document language. Compounded by the fact that browser behaviour is inconsistent, your safest bet is to ensure that the case used is consistent between your CSS and HTML.

Attribute selectors can be matched in 7 ways (as of the CSS3 Specification):

[<attr>]

Targets elements that contain the <attr> attribute, regardless of its value.

<div data-colour="green"></div>
<div data-colour="blue"></div>
<div data-colour="yellow"></div>

[data-colour] { /* some properties */ }

[<attr>=<val>]

Targets elements where the <attr>’s value is exactly <val>.

<div data-colour="green"></div>

[data-colour="green"] { /* some properties */ }

[<attr>~=<val>]

Targets elements with the <attr> attribute whose value is a list of white space separated words, one of which must be <val>.
<val> itself cannot contain white space, and neither can it be an empty string.

<div data-colour="green yellow blue"></div>

[data-colour~="green"] { /* some properties */ }

[<attr>|=<val>]

Targets elements with the <attr> attribute whose value is exactly <val> or starts with <val> immediately followed by a “-“.
Primary use-case being for language subcode matching, like “en”, “en-US” and “en-UK”.

<div data-colour="green-table"></div>
<div data-colour="green-chair"></div>
<div data-colour="green-bottle"></div>

[data-colour|="green"] { /* some properties */ }

[<attr>^=<val>]

A substring matching selector. Targets elements with the <attr> attribute whose value starts with <val>.
<val> cannot be an empty string.

<div data-colour="greenish-yellow"></div>
<div data-colour="greengoblin"></div>

[data-colour^="green"] { /* some properties */ }

[<attr>$=<val>]

A substring matching selector. Targets elements with the <attr> attribute whose value ends with <val>.
<val> cannot be an empty string.

<div data-colour="yellowish-green"></div>
<div data-colour="seagreen"></div>

[data-colour$="green"] { /* some properties */ }

[<attr>*=<val>]

A substring matching selector. Targets elements with the <attr> attribute whose value contains an instance of <val>.
<val> cannot be an empty string.

<div data-colour="goblingreenish"></div>

[data-colour*="green"] { /* some properties */ }

Combining attribute selectors

Attribute selectors have the same specificity level as classes and pseudo-classes. For a handy reference, check out Specificity Calculator by Keegan Street. You can combine attribute selectors with other selectors like elements, classes or IDs.

div[data-colour="green"] {
  /* has a specificity of 11 */
}

.swatch[data-colour="green"] {
  /* has a specificity of 20 */
}

#tile25[data-colour="green"] {
  /* has a specificity of 110 */
}

You can also combine multiple attribute selectors to match specific patterns. For example, if you wanted to target only 2x images with alt text containing the word “green”, your selector would look like this:

img[srcset~="2x"][alt*="green"] { /* some properties */ }

Trivia & Notes

In the initial draft version of the CSS2 specification back in 1997, there were only 3 ways to match selectors, [<attr>], [<attr>=<val>] and [<attr>~=<val>]. By the third published working draft, [<attr>|=<val>] was added as well. The Selectors Level 3 specification then added the substring matching selectors of [<attr>^=<val>], [<attr>=<val>] and [<attr>*=<val>].

Also, because attribute values are read as strings, you don’t have to worry about escaping special characters to make them match, unlike classes or IDs. This means we are free to have things like these:

[data-emotion="😎"] {
  /* some properties */ 
}

[data-emotion="¯\_(ツ)_/¯"] {
  /* some properties */
}