Применить CSS к группе классов css, содержащей col-substring

Я не был уверен в лучшем способе рассказать об этом и, вероятно, почему я изо всех сил пытался его исследовать, хотя это, вероятно, просто.

Что я хочу сделать, это применить CSS к группе классов.

Например, у меня есть классы .col-1, .col-2, .col-3, .col-4

То, что я хочу сделать, это сделать некоторые css, которые могут сказать, может быть, изменить цвет границы для всех классов с текстом col-, поэтому мне не нужно применять его к каждому отдельному номеру.

Я уверен, что видел это раньше, но не могу думать, как это сделать.

Ответ 1

Вы можете использовать [class*="col-"] селектор атрибутов CSS для выбора любого элемента, содержащего хотя бы одно вхождение col- в качестве значения class.

[class*="col-"] {
    border-color: red;
}

Если все значения атрибутов class начинаются с col-, вы можете использовать селектор [class^="col-"].

Однако, чтобы исключить такие классы, как foo-col-1, вы можете использовать комбинацию из двух вышеперечисленных селекторов следующим образом (спасибо @JosephSpens)

[class^="col-"], [class*=" col-"] {
  border-color: red;
}

РАБОЧИЙ ДЕМО.