CSS channel selector with multiple classes
Suppose I have two elements with multiple classes:
<p class="fruit-apple something">First</p>
<p class="whatever fruit-banana">Second</p>
How can I use the "pipe" ( |=
) selector to select classes fruit-
?
I've tried something like the following, but it doesn't seem to work.
p[class|=fruit] {
color: red;
}
<p class="fruit-apple something">First</p>
<p class="whatever fruit-banana">Second</p>
This is obvious, because in the second case the class string does not start with fruit-
, but the selector naively matches.
source to share
|=
the selector selects only the starting portion of the specified attribute.
Instead, you need an operator *=
.
p[class*=fruit-]
It will look for classes containing the phrase fruit-x
where x
is whatever you want.
p[class*=fruit-] {
color: red;
}
<p class="fruit-apple something">First</p>
<p class="whatever fruit-banana">Second</p>
<p class="whatever fruit">Third (No selection)</p>
<p class="fruit noselect">Fourth (No selection)</p>
source to share