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


Output:

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=
        class="Geeks for Geeks" alt="gfg">
          
        <img src=
        class="Geeks-Geeks" alt="geeks"
          
        <img src=
        class="GeeksforGeeks" alt="gfg">
    </body>
</html>                    

chevron_right


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


My Personal Notes arrow_drop_up

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.