To style HTML elements with specific attributes, we can style HTML elements with specific attributes or attribute values.

CSS [attribute=”value”] selector

The [attribute=”value”] selector is used to select elements with specified attributes and values.

Select all elements with target=”_blank” attribute:

a[target="_blank"] { 
  background-color: yellow;
}
Copy the code

CSS [attribute~=”value”] selector

The [attribute~=”value”] selector selects the element whose attribute value contains the specified word.

The following example selects all elements whose title attribute contains the word “flower” :

[title~="flower"] {
  border: 5px solid yellow;
}
Copy the code

Matching values are full words. The above example matches elements with the following attributes: title=”flower”, title=”summer flower”, and title=”flower new”, but not: title=”my-flower” or title=”flowers”.

CSS [attribute | = “value”] selector

[attribute | = “value”] option is used to select the specified attribute to specify a value at the beginning of elements.

The following example selects all elements whose class attribute begins with “top” :

[class|="top"] {
  background: yellow;
}
Copy the code

The value must be a full or single word, such as class=”top” or followed by a hyphen, such as class=”top-text”.

CSS [attribute^=”value”] selector

The [attribute^=”value”] selector is used to select elements that start with the specified value for the specified attribute.

The following example selects all elements whose class attribute begins with “top” :

[class^="top"] {
  background: yellow;
}
Copy the code

Values don’t have to be full words!

CSS [attribute$=”value”] selector

The [attribute$=”value”] selector is used to select an element with a specified attribute ending in a specified value.

The following example selects all elements whose class attribute ends with “test” :

[class$="test"] {
  background: yellow;
}
Copy the code

Values don’t have to be full words!

CSS [attribute*=”value”] selector

The [attribute*=”value”] selector selects the element whose attribute value contains the specified word.

The following example selects all elements whose class attribute contains “te” :

[class*="te"] {
  background: yellow;
}
Copy the code

Values don’t have to be full words!

All CSS property selectors

The selector example Case description
[attribute] [target] Select all elements with the target attribute.
[attribute=value] [target=_blank] Select all elements with the target=”_blank” attribute.
[attribute~=value] [title~=flower] Select all elements with the title attribute that contains the word “flower”.
[attribute|=value] [lang|=en] Select all elements with the lang attribute starting with “en”.
[attribute^=value] a[href^=”https”] Select each whose href attribute value begins with “HTTPS”<a>Elements.
[attribute$=value] a[href$=”.pdf”] Select each whose href attribute value ends with “.pdf”<a>Elements.
[attribute*=value] a[href*=”baidu”] Select each of those whose href attribute value contains the substring “baidu”<a>Elements.