I would like to know if it's possible to target all classes that starts with col- and ends with 12 only?
For example classes like:
.col-sm-12 .col-md-12 .col-lg-12 but not classes like:
.col-sm-8 .col-lg-6 I tried with something like this which is not working:
[class^="col-*-12"] { border: 1px solid red; } You can use the following solution:
[class^="col-"][class$="-12"] { color:red; }<span class="col-lg-12">col-lg-12</span> <span class="col-md-12">col-md-12</span> <span class="col-lg-8">col-lg-8</span> <span class="col-md-9">col-md-9</span>Explanation:
[class^="col-"]: The class have to start with col-.[class$="-12"]: The class have to end with -12.You can find a very good overview of the attribute pattern on CSS tricks.
[class^="col-"][class$="-12"] is what you want.
You are basically looking for a class which starts with 'col-' in first []. And which ends with '-12' in second [].
[class^="col-"][class$="-12"] { color : red; }<div class='col-sm-12'>col-sm-12</div> <div class='col-md-12'>col-md-12</div> <div class='col-lg-12'>col-lg-12</div> <div class='col-lg-6'>col-lg-6</div> <div class='col-lg-8'>col-lg-8</div>
