12

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

2 Answers 2

18

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.

Sign up to request clarification or add additional context in comments.

1 Comment

Wow, didn't know that they could be combined this way. Thanks a lot.
5

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

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.