CSS | [attribute|=value] Selector
The [attribute|=value] selector is used to select those elements whose attribute value is equal to “value” or attribute value started with “value” with immediate followed by hyphen (-).
Note: Use <!DOCTYPE> to run [attribute|=value] selector in IE8 or earlier versions.
Syntax:
[attributeType|=value] { // CSS Property }
Example 1:
<!DOCTYPE html> < html > < head > < title > CSS|[attribute|=value] Selector </ title > <!-- CSS property --> < style > [class|=Geeks] { background-color:green; border: 5px solid green; } </ style > </ head > < body style = "text-align: center;" > <!-- CSS property apply here --> < h1 class = "Geeks" > GeeksforGeeks </ h1 > < h3 class = "GeeksforGeeks" > A computer science portal </ h3 > <!-- CSS property apply here --> < h2 class = "Geeks-portal" > CSS [attribute|=value] Selector </ h2 > </ body > </ html > |
Output:
Example 2:
<!DOCTYPE html> < html > < head > < title > CSS|[attribute|=value] Selector </ title > <!-- CSS property --> < style > [id|=Geeks] { background-color:green; border: 5px solid green; } </ style > </ head > < body style = "text-align: center;" > <!-- CSS property apply here --> < h1 id = "Geeks" > GeeksforGeeks </ h1 > < h3 id = "GeeksClasses" > A computer science portal </ h3 > <!-- CSS property apply here --> < 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
Please Login to comment...