CSS | [attribute~=value] Selector

The [attribute~=”value”] selector is used to select those elements whose attribute value contains a specified word. The “value” must be present in the attribute as a separate word and not as part of the other word i.e if [title~=Geeks] is specified then all elements with Geeks title gets selected.

Syntax:

[attribute~=value] {
    // CSS property
}

Example 1:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html
    <head
        <style
            [class~="Geeks"] { 
                background: green; 
                color: white; 
            
        </style
    </head
      
    <body style = "text-align:center;"
          
        <div class="Geeks Class">
            First div Element
        </div
          
        <div class="GeeksforGeeks">
            Second div Element
        </div
          
        <div class="My Geeks">
            Third div Element
        </div
          
        <div class="MyGeeks">
            Fourth div Element
        </div
    </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 Class" alt="gfg"
          
        <img src
        class="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 2.0
  • Safari 3.1
  • 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.