The asterisk attribute selector *= matches any substring occurrence. You can think of it as a string contains call.
| Input | Matches *=bar |
|---|---|
foo |
No |
foobar |
Yes |
foo bar |
Yes |
foo barbaz |
Yes |
foo bar baz |
Yes |
The tilde attribute selector ~= matches whole words only.
| Input | Matches ~=bar |
|---|---|
foo |
No |
foobar |
No |
foo bar |
Yes |
foo barbaz |
No |
foo bar baz |
Yes |
div {
padding: 10px;
border: 2px solid white;
}
[attribute*=bar] {
background: lightgray;
}
[attribute~=bar] {
border-color: red;
}<div>no attribute</div>
<div attribute="foo">attribute="foo"</div>
<div attribute="foobar">attribute="foobar"</div>
<div attribute="foo bar">attribute="foo bar"</div>
<div attribute="foo barbaz">attribute="foo barbaz"</div>
<div attribute="foo bar baz">attribute="foo bar baz"</div>