CSS [attribute|=value] Selector
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|=Beginner] targets elements with a class attribute that starts with “Beginner” and applies green background color and green border.
html
<!DOCTYPE html> < html > < head > < title > CSS|[attribute|=value] Selector </ title > <!-- CSS property --> < style > [class|=Beginner] { background-color: green; border: 5px solid green; } </ style > </ head > < body style = "text-align: center;" > <!-- CSS property apply here --> < h1 class = "Beginner" > w3wiki </ h1 > < h3 class = "w3wiki" > A computer science portal </ h3 > <!-- CSS property apply here --> < h2 class = "Beginner-portal" > CSS [attribute|=value] Selector </ h2 > </ body > </ html > |
Output:
Example 2: In this example, The CSS selector [id|=Beginner] targets elements with an id attribute that starts with “Beginner” and applies green background color and green border.
html
<!DOCTYPE html> < html > < head > < title > CSS|[attribute|=value] Selector </ title > <!-- CSS property --> < style > [id|=Beginner] { background-color: green; border: 5px solid green; } </ style > </ head > < body style = "text-align: center;" > <!-- CSS property apply here --> < h1 id = "Beginner" > w3wiki </ h1 > < h3 id = "BeginnerClasses" > A computer science portal </ h3 > <!-- CSS property apply here --> < h2 id = "Beginner-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
Contact Us