CSS [attribute$=value] Selector

Description

The CSS [attribute$="value"] selector selects all elements whose attribute value ends with the specified value. The attribute can be any valid HTML attribute, and the value can be any string.

For example, the following selector will select all elements with a class attribute value that ends with test:

[class$="test"] {
  /* CSS styles */
}

This could be used to style all elements with a class attribute value of test, test-1, test-2, and so on.

The [attribute$="value"] selector can be used to style a variety of elements, such as links, images, and form elements. It can also be used to style elements that are generated dynamically, such as elements created with JavaScript.

Here are some examples of how to use the [attribute$="value"] selector:

/* Select all links that end with `.pdf` */
a[href$=".pdf"] {
  color: blue;
}

/* Select all images that end with `.png` */
img[src$=".png"] {
  width: 100px;
}

/* Select all input fields that end with `-name` */
input[name$="-name"] {
  background-color: #eee;
}

The [attribute$="value"] selector is a powerful tool for styling HTML elements based on their attribute values. It can be used to create complex and sophisticated CSS layouts.

Syntax

[attribute$=value] {
    css declarations;
}

Example

a[title$="ca"] {
   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
Yes	Yes	Yes	Yes	Yes

Tablets / Mobile
Yes	Yes	Yes	Yes	Yes	Yes