CSS [attribute=value] Selector

Description

The CSS [attribute="value"] selector matches every element with the specified attribute and value. The attribute and value must both be quoted, and the attribute name is case-insensitive.

For example, the following selector will match all elements with the class attribute set to the value my-class:

[class="my-class"] {
  color: red;
}

This will cause all elements with the class my-class to be displayed in red.

Attribute selectors can be very useful for styling specific elements on a page. For example, you could use them to style all elements with a specific language attribute, or all elements with a specific role attribute.

Here are some more examples of the [attribute="value"] selector:

/* Select all elements with the `href` attribute set to the value `https://example.com`. */
[href="https://example.com"] {
  color: blue;
}

/* Select all elements with the `alt` attribute set to the value `My image`. */
[alt="My image"] {
  width: 100px;
}

/* Select all elements with the `role` attribute set to the value `button`. */
[role="button"] {
  background-color: green;
}

Attribute selectors can also be combined with other CSS selectors to create more specific rules. For example, the following selector will match all li elements with the class attribute set to the value my-list-item:

li[class="my-list-item"] {
  color: black;
}

This will cause all li elements with the class my-list-item to be displayed in black.

Attribute selectors are a powerful tool for styling specific elements on a page. By understanding how to use them, you can create more complex and sophisticated CSS rules.

Syntax

[attribute=value] {
    css declarations;
}

Example

a[target=_blank] {
   color: #3366ff;
   background: #ffff99;
}

Give it a Try

Click the button below to experiment with this selector.

Give it a Try!

Browser Support

The following table will show you the current browser support for the CSS [attribute="value"] selector.

Desktop
Edge Chrome Firefox Opera Safari
YesYesYesYesYes
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
YesYesYesYesYesYes