Open In App

CSS [attribute$=value] Selector

Last Updated : 29 Aug, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

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


Next Article

Similar Reads