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

filter_none

edit
close

play_arrow

link
brightness_4
code

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

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

chevron_right


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 arrow_drop_up
Recommended Articles
Page :