How many CSS selectors can be included?

Question

I've tried looking for an answer to this problem, but to no avail:

I am using css selector to locate all class names starting with col-1, col-2, col-3, col-[class*="col-"]. But I'm running into conflicts with some other third-party integration class names: col-md-11, col-lg-2, col-sm- 3... Thanks a lot, does anyone have any ideas to select only the class names: col-1, col-2, col-3, col-... The most concise way (maybe just one line of code ).

My HTML example:

<div class="row row_1">
  <div class="col-4"></div>
  <div class="col-10"></div>
  <div class="col-3"></div>
  <div class="col-md-11"></div>
</div>
<div class="row row_2">
  <div class="col-12"></div>
  <div class="col-lg-2"></div>
  <div class="col-8"></div>
  <div class="col-sm-3"></div>
</div>

I tried searching on the internet but couldn't find a solution.

Answer 1

It's a bit complicated, but you can combine your existing content with a :not selector;

[class*='col-']:not([class*='col-md'],[class*='col-lg'],[class*='col-sm']){
  color: red;
}

<div class="row row_1">
  <div class="col-4">红色</div>
  <div class="col-10">红色</div>
  <div class="col-3">红色</div>
  <div class="col-md-11">非红色</div>
</div>
<div class="row row_2">
  <div class="col-12">红色</div>
  <div class="col-lg-2">非红色</div>
  <div class="col-8">红色</div>
  <div class="col-sm-3">非红色</div>
</div>