Определить селектор CSS с рисунком

Question

У меня есть следующие элементы:

<div class="grid"> 
    <div class="col-1">First Col</div> 
    <div class="col-center-2">Second Col</div> 
    <div class="col-center-3">third Col</div> 
    <div class="col-3">third Col</div> 
</div> 

я хочу, чтобы добавить класс для всех элементов, которые имеют "-center-" слова. как я могу определить этот селектор?

Answer 1

Вы можете использовать [attr*=value] атрибут селектор

div[class*="-center-"] { 
 
    color: red; 
 
}

<div class="grid"> 
 
    <div class="col-1">First Col</div> 
 
    <div class="col-center-2">Second Col</div> 
 
    <div class="col-center-3">third Col</div> 
 
    <div class="col-3">third Col</div> 
 
</div>