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:

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right






                        filter_none








Output:

Image


Example 2:











                                    filter_none




                                    edit

                                    close




                                    play_arrow




                                    link

                                    brightness_4

                                    code
                                




















<!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://cdncontribute.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png"


        class="Geeks for Geeks" alt="gfg"> 


          


        <img src= 


"https://cdncontribute.geeksforgeeks.org/wp-content/uploads/geeks-25.png"


        class="Geeks-Geeks" alt="geeks">  


          


        <img src= 


"https://cdncontribute.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-10.png"


        class="GeeksforGeeks" alt="gfg"> 


    </body> 


</html>                     



















                        chevron_right







                        filter_none








Output:

Image


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
    • 




          
          
          
          

            

    

        My Personal Notes
        arrow_drop_up
    

    

        
        

            
            
        

    


Recommended Posts:
Image
omprakash_op
Check out this Author's contributed articles.
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on  the "Improve Article" button below.