Open In App

CSS [attribute$=value] Selector

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
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=
         class="Geeks for Geeks"
         alt="gfg">
 
    <img src=
         class="Geeks-Geeks"
         alt="geeks">
 
    <img src=
         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


Last Updated : 20 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads