CSS селектор труб с несколькими классами

Question

Предположим, что у меня есть два элемента с несколькими классами:

<p class="fruit-apple something">First</p> 
<p class="whatever fruit-banana">Second</p> 

Как я могу использовать «трубу» селектор (|=), чтобы выбрать fruit- классы?

Я пробовал что-то вроде следующего, но это, похоже, не сработает.

p[class|=fruit] { 
 
    color: red; 
 
}

<p class="fruit-apple something">First</p> 
 
<p class="whatever fruit-banana">Second</p>

Это, очевидно, потому, что во втором случае, строка класс не начинается с fruit-, а селектор соответствия наивности.

Answer 1

Селектор |= выбирает только starting portion указанного атрибута.

Вместо этого вам понадобится оператор *=.

p[class*=fruit-]

Он будет искать классы, которые содержат фразу fruit-x где x все, что вы хотите.

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>