CSS [attribute|=value] vs [attribute*=value] selectors - css

Question

Why do we need the CSS [attribute|=value] Selector at all when the CSS3 [attribute*=value] Selector basically accomplishes the same thing, the browser compatibility is nearly similar? Is there something that the first CSS selector does and the second isn't able to? This is the first time to encounter two very similar selectors and wonder why the first one exists in the first place.

Answer 1

From the doc:
[attr|=value] Represents an element with an attribute name of attr.
Its value can be exactly “value” or can begin with “value” immediately
followed by “-” (U+002D). It can be used for language subcode matches.
[attr*=value] Represents an element with an attribute name of attr and
whose value contains at least one occurrence of string "value" as
substring.
Visual differences:
[attr|=value]
/* Any span in Chinese is red, matches simplified (zh-CN) or traditional (zh-TW) */
span[lang|="zh"] {color: red;}
<span lang='zh'>zh</span>
[attr*=value]
/* All links to with "example" in the url have a grey background */
a[href*="example"] {background-color: #CCCCCC;}
<a href="www.example.com">example<a/>
In the same code example:
div[color|="red"] {
background: red;
}
div[color*="blue"] {
color: blue;
}
<div>
<div color='red-yellow'>This shoud has only red background</div>
<div color='blue'>This shoud has only blue color</div>
<div color='red-blue'>This shoud has blue color and red background</div>
<div color='blue-red'>This shoud be only blue color</div>
</div>
References
Attribute selectors

Answer 2

There are a lot of differences between these two selectors
[lang|=en] {
background: yellow;
}
[lang*=en] {
color:red;
}
<p lang="en">Hello!</p>
<p lang="en-us">Hi!</p>
<p lang="en-gb">Ello!</p>
<p lang="usen">Hi!</p>
<p lang="noen">Hei!</p>
<p><b>Note:</b> For [<i>attribute</i>|=<i>value</i>] to work in IE8 and earlier, a DOCTYPE must be declared.</p>
The [attribute|=value] selector is used to select elements with the specified attribute starting with the specified value.
The [attribute*=value] selector matches every element whose attribute value containing a specified value.
See the example to get a clear idea about both the selectors.

Answer 3

They are distinctly different:
[attr|=value]
Represents an element with an attribute name of attr. Its value can be exactly “value” or can begin with “value” immediately followed by “-” (U+002D). It can be used for language subcode matches.
[attr*=value]
Represents an element with an attribute name of attr and whose value contains at least one occurrence of string "value" as substring.
https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

Answer 4

The first selector ensures the attribute value starts with the value submitted, the second only requires the attribute value contains it.
This would be helpful if you had to distinguish between attributes that had the same string in different positions within the same attribute.

Answer 5

CSS has evolved over time, and as it has evolved the need and want for more selectors, and functions has increased.
The CSS [attribute|=value] Selector was defined before CSS3 (latest version), and was available in CSS 2.1. As noted in the page you linked to:
used to select elements with the specified attribute starting with the specified value.
Whilst this is handy in most cases, sometimes there are frameworks, which come with structured css in the from of someString_somethingUseful_somethingElse for its class definition.
Now say I wanted to select all elements with the somethingUseful bit in it. The above selector would not allow me to do this, as the somethingUseful bit of the class definitions located in the middle of the class name. the same with the somethingElse bit, it is located at the end.
Thus in CSS3, we saw the introduction of [attribute*=value] selector which allows us to select elements which may have these keywords as a substring in their definition (though not necessarily at the front) See:
selector matches every element whose attribute value containing a specified value.