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.
Browser Support
The following table will show you the current browser support for the CSS [attribute="value"]
selector.
Desktop | |||||
Yes | Yes | Yes | Yes | Yes |
Tablets / Mobile | |||||
Yes | Yes | Yes | Yes | Yes | Yes |