css selectors - Apply CSS to a group of css classes containing col- substring

Question

I wasn't sure of the best way to word this and that's probably why I have struggled to research it even though it is probably simple.

What I want to do is a apply CSS to a group of classes.

For example I have the classes .col-1, .col-2, .col-3, .col-4

What I want to be able to do is make some css that can say maybe change the border color for all classes with the text col- so I don't have to apply it to each individual number.

I'm sure I've seen this before but cannot think how to do it.

question from:https://stackoverflow.com/questions/22509402/apply-css-to-a-group-of-css-classes-containing-col-substring

Answer 1

You could use [class*="col-"] CSS attribute selector to select any element contains at least one occurrence of col- as its class value.

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

If all values of class attributes begin with col-, you could use [class^="col-"] selector.

However, in order to prevent for classes like foo-col-1 to be selected, you could use a combination of two above selectors as follows (Thanks to @JosephSpens):

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

WORKING DEMO.