Targeting Elements with Attribute-Universal Selectors in CSS

[attributename*="value"]

The [attribute*="value"] selector in CSS is an attribute selector that targets elements based on whether a specific attribute contains a specified value anywhere within its attribute value.

[attribute*="value"]: This selector syntax consists of square brackets and an attribute name (attribute) followed by the *= operator and the desired value (value). It selects elements that have an attribute (attribute) containing the specified value as a substring.

Source Code :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Attribute Selector</title>
    <style>
      span[class*="test"] {
        color: red;
      }
    </style>
  </head>
  <body>
    <h3>[attributename*="value"] Selector</h3>
    <p>Value occurs anywhere in attribute</p>

    <span class="text"> Content1... </span>
    <span class="test"> Content2... </span>
    <span class="test-demo"> Content3... </span>
    <span class="demo-test"> Content4... </span>
    <span class="demotest"> Content5... </span>
    <span class="demo test"> Content6... </span>
  </body>
</html>

Live Preview

This CSS rule uses an attribute selector with the *= operator to select  elements whose class attribute contains the substring "test".

span[class*="test"]: This is the selector part of the rule. It targets all  elements that meet the condition specified within the square brackets.

[class*="test"]: This is the attribute selector. It specifies the condition for selecting elements. In this case, it's looking for  elements with a class attribute where the attribute value contains the substring "test."

color: red;: This is the style declaration. It sets the color property of the selected  elements to red.

So, this CSS rule will select all  elements that have a class attribute containing the substring "test" and apply the red color to them. For example, it would match  and , as long as "test" is present as a substring within their class attributes.

Attribute selectors like [attribute*="value"] can be handy for styling or manipulating elements based on partial attribute values, making them more versatile in terms of selecting elements in your web pages.