CSS | [attribute=value] Selector
The [attribute=value] selector in CSS is used to select those element whose attribute value is equal to “value”.
Syntax:
element [attribute = "value"] {
// CSS Property
}Note: <!DOCTYPE> must be declared for IE8 and earlier versions.
Example 1:
html
<!DOCTYPE html><html> <head> <!-- CSS property used here --> <style> h1[id = "geeks"] { background-color: green; color:white; } li[class = "gfg"] { color:green; } </style> </head> <body> <h1 id = "geeks">GeeksforGeeks</h1> <ul> <li class = "gfg">Data Structure</li> <li class = "geeks">Algorithm</li> <li class = "gfg">DBMS</li> <li class = "geeks">C++ programming</li> </ul> </body></html> |
Output:
Example 2:
html
<!DOCTYPE html><html> <head> <title> CSS [attribute=value] Selector </title> <!-- CSS property --> <style> p[this=Geeks] { background-color: green; color:white; } </style> </head> <body> <h2>[attribute=value] Selector</h2> <p this = "Geeks">Paragraph 1</p> <p this = "geeks">Paragraph 2</p> <p this="Geeks">Paragraph 2</p> </body></html> |
Output:
Supported Browser:
- Google Chrome
- Microsoft Edge
- Firefox
- Opera
- Safari
Please Login to comment...