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>

Output:

Supported Browsers: The browser supported by [attribute$=value] selector are listed below:

Google Chrome 4.0
Internet Explorer 7.0
Firefox 3.5
Safari 3.2
Opera 9.6

CSS [attribute$=value] Selector

Explore