Description

The attribute selector matches elements that have a particular value for a particular attribute.

Attribute selectors are delimited by square brackets.

This selector has the following three forms:

E[attribute] {
  properties
}

This form matches all E elements that have an attribute named attribute.

E[attribute="value"] {
  properties
}

This form matches all E elements that have an attribute named attribute with a value of value.

E[attribute~="value"] {
  properties
}

This form matches all E elements that have an attribute named attribute with a space-separated list of values, one of which is value.

This form can also be used to match elements with a specific class by specifying class as the attribute.

Note: For the last form, "|=" can be used instead of "~=" to match a hyphen-separated list of values.

Examples

This example colors the text red for every h1 element that has intro as the class.

h1[class~="intro"] {
  color:red;
}

This selector would match both:
<h1 class="intro"> and
<h1 class="example intro">, but not
<h1 class="introduction">.

Chrome	Firefox	IE	Safari	Opera

Defined In:	CSS2