Skip to content
Related Articles

Related Articles

CSS | [attribute~=value] Selector
  • Last Updated : 10 Jan, 2019

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:




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

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 Class" alt="gfg"
          
        <img src
        class="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 2.0
  • Safari 3.1
  • 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 :