Select multiple CSS classes with wildcard

Question

I want to color all the classes in a grid I downloaded, the Flexbox.

It has 12 columns, I want to do something like col-md-* and select everyone who uses this class to color.

Answer 1

CSS3 solution

As nowadays CSS3 is accepted by the overwhelming majority of browsers, you can do this with attribute selector:

div[class^="col-md-"] {
   color:red 
}

But BEWARE that the above example does not catch this:

<div class="batata col-md-3">

because he is not considering the classes, but the strings.

To be complete, you can use this:

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

Great attention to space before col in the second case. Basically we are saying this:

• class^="col-md-": the attribute class begins with col-md-

  OR

• class*=" col-md-": the attribute class contains col-md- (with space at the beginning)

CSS2 solution (laborious for the author, lightweight for the browser)

To be compatible with CSS2, just listing everything manually, this way:

   col-md-1,
   col-md-2,
   col-md-3,
   col-md-4,
   ... listar todos possíveis separados por vírgula ...
   col-md-12 {
     color: red;
   }

The advantage of this is that it "facilitates the life" of the browser, avoiding complex operations for applying styles while mounting the page.