CSS [attribute|=value] Selector
Last Updated :
04 Jul, 2023
The [attribute|=value] selector is used to select those elements whose attribute value is equal to “value” or whose attribute value started with “value” immediately followed by a hyphen (-).
Note: Use <!DOCTYPE> to run [attribute|=value] selector in IE8 or earlier versions.
Syntax:
[attributeType|=value] {
// CSS Property
}
Example 1: In this example, The CSS selector [class|=Geeks] targets elements with a class attribute that starts with “Geeks” and applies green background color and green border.
html
<!DOCTYPE html>
< html >
< head >
< title >
CSS|[attribute|=value] Selector
</ title >
< style >
[class|=Geeks] {
background-color: green;
border: 5px solid green;
}
</ style >
</ head >
< body style = "text-align: center;" >
< h1 class = "Geeks" >
GeeksforGeeks
</ h1 >
< h3 class = "GeeksforGeeks" >
A computer science portal
</ h3 >
< h2 class = "Geeks-portal" >
CSS [attribute|=value] Selector
</ h2 >
</ body >
</ html >
|
Output:
Example 2: In this example, The CSS selector [id|=Geeks] targets elements with an id attribute that starts with “Geeks” and applies green background color and green border.
html
<!DOCTYPE html>
< html >
< head >
< title >
CSS|[attribute|=value] Selector
</ title >
< style >
[id|=Geeks] {
background-color: green;
border: 5px solid green;
}
</ style >
</ head >
< body style = "text-align: center;" >
< h1 id = "Geeks" >
GeeksforGeeks
</ h1 >
< h3 id = "GeeksClasses" >
A computer science portal
</ h3 >
< h2 id = "Geeks-portal" >
CSS [attribute|=value] Selector
</ h2 >
</ body >
</ html >
|
Output:
Supported Browsers: The browser supported by [attribute|=value] selector are listed below:
- Google Chrome 4.0
- Internet Explore 7.0
- Firefox 2.0
- Apple Safari 3.1
- Opera 9.6
Share your thoughts in the comments
Please Login to comment...