Имена классов класса CSS, начинающиеся с до определенного символа

Question

У меня есть несколько имен классов, которые мне нужно изменить.

Сейчас имя класса просто .col

, так что я немного CSS, который выглядит следующим образом:

.col {width:50%}; 

Теперь ... У меня есть несколько классов, которые выглядят следующим образом:

.one-col {something here}; 
.two-col {something here}; 

Как я могу изменить .col {}; так что он нацелен на любой из тех, которые выглядят как выше?

Answer 1

Вы можете использовать частичный селектор *, как это:

[class*="col"]{ 
 
    height: 50px; 
 
    background: #333; 
 
} 
 
.one-col { 
 
    background: blue; 
 
} 
 
.two-col { 
 
    background: red; 
 
}

<div class="asas-col-asadas"></div> 
 
<div class="one-col"></div> 
 
<div class="two-col"></div>

Проверить это передняя просто информация https://css-tricks.com/almanac/selectors/a/attribute/

Answer 2

Используйте содержит селектор

[class*="-col"] {width:50%}; 

Answer 3

Вы можете добавить оба класса к элементам, которые вы хотите так, что бы наследовать свойства от обоих классов.

<div class="col one-col">...</div> 

---

В качестве альтернативы (хотя выглядит как плохая идея, так как это зависит от того, что классы применяются к элементу), будет концами, с селекторов атрибутов.

[class $= "-col"] {width:50%}