CSS селектор, выбирающий элементы, НЕ имеющие определенного класса

Question

Не уверен, что это возможно? Попытка сделать так, чтобы горизонтальный класс карты не придерживался того же стиля, что родительский класс. Пожалуйста, смотрите ниже:

.-horizontal_image, .-horizontal_content {
    color: red;
}

.parent [class*="col-"]:not([class*="card-horizontal_"]):first-child {
    color: orange;
}

.parent [class*="col-"]:not([class*="card-horizontal_"]):last-child {
     color: yellow;
}

<div class="parent">
<div class="col-4">
6789 should be orange
<a>
<div class="col-4 -horizontal_image">image red</div>
<div class="col-6 -horizontal_content">12345 red</div>
</a>
</div>
<div class="col-4">
more 12345 should be yellow
</div>
</div>

Answer 1

Я думаю, что следующие комбинации могут дать вам нужные цвета, если я правильно понял ваш вопрос.

См. Демонстрацию ниже

.parent > .col-4:first-child {
  color: orange;
}

.parent .-horizontal_image,
.parent .-horizontal_content{
  color: red;
}

.parent > .col-4 + .col-4 {
  color: yellow;
}

<div class="parent">
  <div class="col-4">
    6789 should be orange
    <a>
      <div class="col-4 -horizontal_image">image red</div>
      <div class="col-6 -horizontal_content">12345 red</div>
    </a>
  </div>
  <div class="col-4">
    more 12345 should be yellow
  </div>
</div>

Answer 2

Это решит мой вопрос. Спасибо всем.

.-horizontal_image, .-horizontal_content {
    color: red;
}

.parent [class^="col-"]:not([class*="horizontal_"]):first-child {
    color: orange;
}

.parent [class^="col-"]:not([class*="horizontal_"]):last-child {
     color: yellow;
}

<div class="parent">
<div class="col-4">
6789
<a>
<div class="col-4 -horizontal_image">image</div>
<div class="col-6 -horizontal_content">12345</div>
</a>
</div>
<div class="col-4">
more 12345
</div>
</div>

Answer 3

Не уверен, что вы спрашиваете, но я думаю, что это вас там. Используйте ^ против * ... * любое совпадение, где ^ начальное совпадение

.-horizontal_image, .-horizontal_content {
    color: red;
}

.parent [class^="col-"]::first-child {
    color: orange;
}

.parent [class^="col-"]::last-child {
     color: yellow;
}

<div class="parent">
<div class="col-4">
6789
<a>
<div class="col-4 -horizontal_image">image</div>
<div class="col-6 -horizontal_content">12345</div>
</a>
</div>
<div class="col-4">
more 12345
</div>
</div>