Skip to content
Related Articles

Related Articles

CSS | [attribute$=value] Selector
  • Last Updated : 08 Jan, 2019
GeeksforGeeks - Summer Carnival Banner

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:




<!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:






<!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

Attention reader! Don’t stop learning now. Get hold of all the important DSA concepts with the DSA Self Paced Course at a student-friendly price and become industry ready.

My Personal Notes arrow_drop_up
Recommended Articles
Page :