CSS Wildcard Selectors

Sometimes you need a 'wildcard' selector for your class or id. This can be necessary in bootstrap or other frameworks when working with several column widths. Instead of doing something like the following:

.content-blocks > .col-md-3 > .panel{
    position: relative;
}
.content-blocks > .col-md-3 > .panel > .panel-footer{
    position: absolute;
    bottom: 0;
    width: 100%;
}
.content-blocks > .col-md-4 > .panel{
    position: relative;
}
.content-blocks > .col-md-4 > .panel > .panel-footer{
    position: absolute;
    bottom: 0;
    width: 100%;
}
.content-blocks > .col-md-6 > .panel{
    position: relative;
}
.content-blocks > .col-md-6 > .panel > .panel-footer{
    position: absolute;
    bottom: 0;
    width: 100%;
}

You can simplify it by using a wildcard that anything with that path with any column width needs to have certain styles. This is great for buttons and such things. Above, we account for only 3 different situations, of which there are MANY more when you consider col-xs, col-sm, col-md, col-lg, and the different widths within each of those. What if we could apply a style to ALL columns? We can with the wildcard selector:

.content-blocks > div[class^='col-'] > .panel{
    position: relative;
}
.content-blocks > div[class^='col-'] > .panel > .panel-footer{
    position: absolute;
    bottom: 0;
    width: 100%;
}

div[class^='col-']  states that 'anything that starts with col-'. Other options are div[class*='col-']  'anything that contains' and div[class$='-6'] 'anything that ends with'.