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 get selected.
Syntax:
[attribute~=value] {
// CSS property
}
Example 1: In this example, The CSS selector [class~="Geeks"] targets elements with a class attribute containing the word "Geeks" and applies green background color and white text color.
<!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: In this example, The CSS selector [class~=Geeks] targets elements with a class attribute that contains the word "Geeks" and applies a blue solid border.
<!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=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png"
class="Geeks Class"
alt="gfg">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeks-25.png"
class="Geeks"
alt="geeks">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-10.png"
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
