CSS Attribute Selectors

Set styles for HTML elements with specific attributes

We can set the style of HTML elements with specific attributes or attribute values.

CSS [attribute] Selector

[attribute] selector is used to select elements with a specified attribute.

The following example selects all <a> elements with the target attribute;

Instance

a[target] {
  background-color: yellow;
}

Try it yourself

CSS [attribute="value"] selector

[attribute="value"] selector is used to select elements with a specified attribute and value.

The following example selects all <a> elements with the target attribute set to "_blank":

Instance

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

Try it yourself

CSS [attribute~="value"] selector

[attribute~="value"] selector selects elements with an attribute value containing the specified word.

The following example selects all elements with the title attribute containing the word "flower":

Instance

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

Try it yourself

The above example will match elements with the following attributes: title="flower", title="summer flower", and title="flower new", but will not match: title="my-flower" or title="flowers".

CSS [attribute|="value"] selector

[attribute|="value"] selector is used to select elements with an attribute whose value starts with the specified value.

The following example selects all elements with the class attribute starting with "top":

Note:The value must be a complete or standalone word, such as class="top" or followed by a hyphen, such as class="top-text".

Instance

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

Try it yourself

CSS [attribute^="value"] selector

[attribute^="value"] selector is used to select elements with the specified attribute starting with the specified value.

The following example selects all elements with the class attribute starting with "top":

Tip:The value does not have to be a complete word!

Instance

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

Try it yourself

CSS [attribute$="value"] selector

[attribute$="value"] selector is used to select elements with the specified attribute ending with the specified value.

The following example selects all elements with the class attribute ending with "test":

Tip:The value does not have to be a complete word!

Instance

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

Try it yourself

CSS [attribute*="value"] selector

[attribute*="value"] selector selects elements whose attribute value contains the specified word.

The following example selects all elements with the class attribute containing "te":

Tip:The value does not have to be a complete word!

Instance

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

Try it yourself

Set form styles

If you need to set styles for forms without class or id, attribute selectors can be very useful:

Instance

input[type="text"] {
  width: 150px;
  display: block;
  margin-bottom: 10px;
  background-color: yellow;
}
input[type="button"] {
  width: 120px;
  margin-left: 35px;
  display: block;
}

Try it yourself

Tip:Please visit our CSS Form Tutorial, for more knowledge on how to use CSS to set form styles.

All CSS attribute selectors

Selector Example Example description
[attribute] [target] Select all elements with the target attribute.
[attribute=value] [target=_blank] Select all elements with the attribute target="_blank".
[attribute~=value] [title~=flower] Select all elements with a title attribute containing the word "flower".
[attribute|=value] [lang|=en] Select all elements with a lang attribute starting with "en".
[attribute^=value] a[href^="https"] Select each <a> element whose href attribute value starts with "https".
[attribute$=value] a[href$=".pdf"] Select each <a> element whose href attribute value ends with ".pdf".
[attribute*=value] a[href*="codew3c"] Select each <a> element whose href attribute value contains the substring "codew3c".

Further Reading

课外书：CSS Attribute Selectors in Detail