CSS | [attribute$=value] Selector
The [attribute$=”value”] selector is used to select those elements whose attribute value ends with a specified value “value”. The value need not to be present as separate word. It may be a part of another word or expression but it needs to be present at the end.
Syntax:
[attribute$="value"] {
// CSS property
} Example 1:
<!DOCTYPE html> <html> <head> <style> [class$="str"] { background: green; color: white; } h1 { color:green; } body { text-align:center; width:60%; } </style> </head> <body> <h1>GeeksforGeeks</h1> <!-- All items ending with str are highlighted --> <div class="firststr">The first div element.</div> <div class="stsecondstr">The second div element.</div> <div class="start">The third div element.</div> <p class="mystr">This is some text in a paragraph.</p> </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 for Geeks" alt="gfg"> <img src= class="Geeks-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 3.5
- Safari 3.2
- Opera 9.6
Please Login to comment...