Exploring Advanced Attribute ($) Selectors in CSS

[attributename$="value"]

The [attribute$="value"] selector is used to select elements whose attribute value ends with a specified value.

It matches every element whose attribute value ends with a specified value.

Instead of using the circumflex accent, the ends with attribute selector uses the dollar sign, $ , within the square brackets of a selector between the attribute name and equals sign. Using the dollar sign denotes that the attribute value needs to end with the stated value.

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;
      }*/

      [class$="test"] {
        color: red;
      }
    </style>
  </head>
  <body>
    <h3>[attributename$="value"] Selector</h3>
    <p class="test">Attribute end with the value (test)</p>

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

Live Preview

This CSS rule uses an attribute selector with the $= operator to select elements that have a class attribute ending with the string "test."

[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 ends with "test."

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