CSS Attribute Selectors

The attribute selector targets elements that have a specific attribute.

In the example below, all <a> elements with a target attribute are selected.

<a href="https://www.webmastermaze.com">WebmasterMaze</a>
<a target="_blank" href="https://www.google.com">Google</a>
<a target="_blank" href="https://wikipedia.org">Wikipedia</a>

a[target] {
  color: red;
}

CSS [attribute="value"] Selector

The attribute value selector is used to target elements that have a specific attribute with a specified value.

The example below selects all <a> elements that have a target="_blank" attribute.

<a target="_blank" href="https://www.webmastermaze.com">WebmasterMaze</a>
<a href="https://www.google.com">Google</a>
<a target="_blank" href="https://wikipedia.org">Wikipedia</a>

a[target="_blank"] {
  color: red;
}

CSS [attribute~="value"] Selector

This selector targets elements with an attribute value that includes a specific word.

The example below selects an element with a title attribute containing a comma separated list of words, one of which is "Mountain".

<img alt="Image1" src="image1.png" title="Bridge, River, Trees">
<img alt="Image2" src="image2.png" title="Mountain, River, Trees">
<img alt="Image3" src="image3.png" title="Boat, River, Trees">

[title~="Mountain"] {
  border: 2px solid orange;
}

CSS [attribute|="value"] Selector

This selector is used to target elements with an attribute value that either matches the specified value exactly or begins with the specified value followed by a hyphen (-).

Note: The value must be a whole word, either by itself, such as class="third", or followed by a hyphen (-), such as class="third-image".

<img class="first-image" alt="Image1" src="image1.png">
<img class="second-image" alt="Image2" src="image2.png">
<img class="third-image" alt="Image3" src="image3.png">

[class|="third"] {
  opacity: 0.4;
}

CSS [attribute^="value"] Selector

This selector targets elements with an attribute value that begins with the specified value.

Note: The value does not need to be a whole word!

The example below selects an element with a class attribute value beginning with "second".

<img class="first-image" alt="Image1" src="image1.png">
<img class="second-image" alt="Image2" src="image2.png">
<img class="third-image" alt="Image3" src="image3.png">

[class^="second"] {
  opacity: 0.4;
}

CSS [attribute$="value"] Selector

This selector targets elements whose attribute value ends with the specified value.

The example below selects an element with a class attribute value ending with "first".

<img class="image-first" alt="Image1" src="image1.png">
<img class="image-second" alt="Image2" src="image2.png">
<img class="image-third" alt="Image3" src="image3.png">

[class$="first"] {
  opacity: 0.6;
}

CSS [attribute*="value"] Selector

This selector targets elements whose attribute value includes the specified value.

The example below selects an element with a class attribute value that contains "center".

<img class="image-left" alt="Image1" src="image1.png">
<img class="image-center" alt="Image2" src="image2.png">
<img class="image-right" alt="Image3" src="image3.png">

[class*="mid"] img:hover {
  opacity: 1.0;
}