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