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>
<!-- 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: 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>
<!-- 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