Select multiple CSS classes with wildcard


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

It has 12 columns, I want to do something like col-md-* and select all that use this class to color.

asked by anonymous 05.01.2017 / 01:54

1 answer


CSS3 solution

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

div[class^="col-md-"] {

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-"] {

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-


  • 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:

   ... 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.

05.01.2017 / 01:58