Select multiple CSS classes with wildcard

CSS3 solution

Since today 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 get this:

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

Because it 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;
}

Pay close attention to the space before col in the second case. We're basically saying this:

• class^="col-md-" : attribute class starts with col-md-

  OR

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

CSS2 solution (painstaking for the author, take it to the browser )

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

   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 to apply the styles when assembling the page.