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|=Geeks] targets elements with a class attribute that starts with “Geeks” and applies green background color and green border.
<!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.
<!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
CSS [attribute|=value] Selector – FAQs
What is the purpose of the [attribute|=value] selector in CSS?
The [attribute|=value] selector selects elements with an attribute value that starts with a specified value, followed by a hyphen (-).
How do I use the [attribute|=value] selector for language attributes?
You can use [attribute|=value] to match language codes, like [lang|=”en”] to select elements with “en” or “en-US” language codes.
Can [attribute|=value] be used for non-language attributes?
Yes, it can be used for any attribute where the value starts with the specified value followed by a hyphen.
What is a common use case for the [attribute|=value] selector?
It is commonly used for styling based on language settings or any attribute that contains a prefix followed by other characters.
Does [attribute|=value] require an exact match to work?
No, it matches if the attribute value starts with the specified string and is followed by a hyphen, even if additional characters follow.
