CSS [attribute*=value] Selector

Description

The CSS [attribute*="value"] selector matches every element whose attribute value contains a specified value. The following example selects all elements with a class attribute value that contains "te":

[class*="te"] {
  color: red;
}

This will turn all elements with a class attribute value of "text", "footer-text", or "something-else-te" red.

The [attribute*="value"] selector is useful for selecting elements with dynamic attribute values. For example, you could use it to select all elements with a data-* attribute that contains a specific value. This could be useful for styling elements based on user data or other dynamic information.

Here is another example:

[data-role*="navigation"] {
  background-color: blue;
}

This will turn all elements with a data-role attribute value of "navigation", "main-navigation", or "sidebar-navigation" blue.

The [attribute*="value"] selector is a powerful tool for selecting elements based on their attribute values. It can be used to create dynamic and flexible CSS styles.

Syntax

[attribute*=value] {
    css declarations;
}

Example

a[title*="America"] {
   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