CSS [attribute$=value] Selector

The [attribute$=”value”] selector is used to select those elements whose attribute value ends with a specified value “value”. The value need not to be present as separate word. It may be a part of another word or expression but it needs to be present at the end.

Syntax:

[attribute$="value"] {
    // CSS property
}

Example 1: In this example, we are using the above-explained property.

html

<!DOCTYPE html>
<html>
   
<head>
    <style>
        [class$="str"] {
            background: green;
            color: white;
        }
 
        h1 {
            color: green;
        }
 
        body {
            text-align: center;
            width: 60%;
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
 
    <!-- All items ending with str are highlighted -->
    <div class="firststr">The first div element.</div>
    <div class="stsecondstr">The second div element.</div>
    <div class="start">The third div element.</div>
    <p class="mystr">This is some text in a paragraph.</p>
</body>
   
</html>

Output:

Example 2:

html

<!DOCTYPE html>
<html>
   
<head>
    <title>
        CSS [attribute$=value] Selector
    </title>
 
    <style>
        [class$=Geeks] {
            border: 5px solid blue;
        }
    </style>
</head>
 
<body>
    <h2 style="text-align:center">
          [attribute$=value] Selector
      </h2>
 
    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png"
         class="Geeks for Geeks"
         alt="gfg">
 
    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeks-25.png"
         class="Geeks-Geeks"
         alt="geeks">
 
    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-10.png"
         class="GeeksforGeeks"
         alt="gfg">
</body>
   
</html>