CSS | [attribute|=value] Selector

The [attribute|=value] selector is used to select those elements whose attribute value is equal to “value” or attribute value started with “value” with immediate followed by hyphen (-).
Note: Use <!DOCTYPE> to run [attribute|=value] selector in IE8 or earlier versions.

Syntax:

[attributeType|=value] {
    // CSS Property
}

Example 1:

<!DOCTYPE html>  
<html>  
    <head>  
        <title> 
            CSS|[attribute|=value] Selector 
        </title> 
          
        <!-- CSS property -->
        <style> 
            [class|=Geeks] { 
                background-color:green; 
                border: 5px solid green; 
            } 
        </style> 
    </head>  
      
    <body style = "text-align: center;"> 
          
        <!-- CSS property apply here -->
        <h1 class = "Geeks"> 
            GeeksforGeeks 
        </h1> 
          
        <h3 class = "GeeksforGeeks"> 
            A computer science portal 
        </h3> 
          
        <!-- CSS property apply here -->
        <h2 class = "Geeks-portal"> 
            CSS [attribute|=value] Selector 
        </h2> 
      
    </body> 
</html>                     

Output:

Example 2:

<!DOCTYPE html>  
<html>  
    <head>  
        <title> 
            CSS|[attribute|=value] Selector 
        </title> 
          
        <!-- CSS property -->
        <style> 
            [id|=Geeks] { 
                background-color:green; 
                border: 5px solid green; 
            } 
        </style> 
    </head>  
      
    <body style = "text-align: center;"> 
          
        <!-- CSS property apply here -->
        <h1 id = "Geeks"> 
            GeeksforGeeks 
        </h1> 
          
        <h3 id = "GeeksClasses"> 
            A computer science portal 
        </h3> 
          
        <!-- CSS property apply here -->
        <h2 id = "Geeks-portal"> 
            CSS [attribute|=value] Selector 
        </h2> 
      
    </body> 
</html>                     

Output:

Supported Browsers: The browser supported by [attribute|=value] selector are listed below:

Google Chrome 4.0
Internet Explore 7.0
Firefox 2.0
Apple Safari 3.1
Opera 9.6

My Personal Notes

Recommended Posts: