CSS [attribute~=value] Selector
Last Updated :
04 Jul, 2023
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.
html
<!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.
html
<!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
Share your thoughts in the comments
Please Login to comment...