CSS | [attribute~=value] Selector
The [attribute~=”value”] selector is used to select those elements whose attribute value contains a specified word. The “value” must be present in the attribute as a separate word and not as part of the other word i.e if [title~=Geeks] is specified then all elements with Geeks title gets selected.
Syntax:
[attribute~=value] {
// CSS property
}
Example 1:
<!DOCTYPE html> <html> <head> <style> [class~="Geeks"] { background: green; color: white; } </style> </head> <body style = "text-align:center;"> <div class="Geeks Class"> First div Element </div> <div class="GeeksforGeeks"> Second div Element </div> <div class="My Geeks"> Third div Element </div> <div class="MyGeeks"> Fourth div Element </div> </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 Class" alt="gfg"> <img src= class="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 2.0
- Safari 3.1
- Opera 9.6
Please Login to comment...