Селектор CSS: «выбирайте X, только если у него нет родительского Y»

Question

Я хочу, чтобы .c был красным и жирным, ТОЛЬКО ЕСЛИ у него нет родителя .b (прямой или косвенный):

.a :not(.b) .c {
  color: red;
  font-weight: bold;
}

<div class="a">
  <div class="not-b">
    <div class="c">bold red</div>
    <div class="b">
      <div class="c">normal black</div>
    </div>
  </div>
</div>

Answer 1

Вам нужно выбрать правило для каждого уровня вложенности, который вы можете пройти.Нет возможности установить общее решение для любого уровня

С другой стороны, у вас не должно быть DOM с таким количеством уровней вложенности, что вы не сможете справиться с ним, скажем, с 6 селекторами ....

.a > .c,
.a > *:not(.b) > .c, 
.a > *:not(.b) > *:not(.b) > .c, 
.a > *:not(.b) > *:not(.b) > *:not(.b) >.c {
  background-color: red;
}

<div class="a">
  <div class="g">
    <div class="c">i should be red</div>
  </div>
</div>

<div class="a">
  <div class="c">i should be red</div>
</div>

<div class="a">
  <div class="g">
    <div class="f">
      <div class="c">i should be red</div>
    </div>
  </div>
</div>

<div class="a">
  <div class="b">
    <div class="c">i should not be red</div>
  </div>
</div>

<div class="a">
  <div class="g">
    <div class="b">
      <div class="f">
        <div class="c">i should not be red</div>
      </div>
    </div>
  </div>
</div>

<div class="a">
  <div class="g">
    <div class="d">
      <div class="b">
        <div class="f">
          <div class="e">
            <div class="c">i should not be red</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

Здесь нет одного селектора, которого здесь будет достаточно.

Вам просто нужно добавить .a > .c к вашему селектору

.a *:not(.b) .c,
.a > .c {
  color: red;
}

<div class="a">
  <div class="g">
    <div class="c">i should be red</div>
  </div>
</div>

<div class="a">
  <div class="c">i should be red</div>
</div>

Answer 3

Во-первых, я думаю, вы должны по умолчанию выбрать красный, класс c .Затем выполните следующее:

CSS

.a .c {
    color: red
}

.a .not-red .c {
    color: blue;
}

HTML

<div class="a">
    <div class="b not-red">
        <div class="c">
            test
        </div>
    </div>
</div>

Я проверил, и этоработает как хочешь.

Answer 4

Одним из решений является разделение определений CSS.Начните с предположения, что текст всегда будет красным, если в какой-то момент за .a следует .c, затем укажите, что вы хотите сбросить все, если .b находится в пути в любой точке.

.a .c {
  color: red;
  background-color: gray;
  display: inline-block;
  padding: 2em;
  animation-name: spin;
  animation-duration: 4000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}

.a .b .c {
  all: unset;
}

<div class="a">
  <div class="g">
    <div class="c">i should be red and spinning</div>
  </div>
</div>

<div class="a">
  <div class="c">i should be red and spinning</div>
</div>

<div class="a">
  <div class="g">
    <div class="f">
      <div class="c">i should be red and spinning</div>
    </div>
  </div>
</div>

<div class="a">
  <div class="b">
    <div class="c">i should not be red or spinning</div>
  </div>
</div>

<div class="a">
  <div class="g">
    <div class="b">
      <div class="f">
        <div class="c">i should not be red or spinning</div>
      </div>
    </div>
  </div>
</div>

<div class="a">
  <div class="g">
    <div class="d">
      <div class="b">
        <div class="f">
          <div class="e">
            <div class="c">i should not be red or spinning</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Примечание: all не работает в IE.Кроме того, анимация вращения взята из здесь - я просто вставил это, чтобы продемонстрировать, как all перезаписывает все, включая любые анимации.

Answer 5

Я хочу, чтобы .c был красным, только если между .a и .c нет родительского .b или если между .a и .c вообще нет родителя.

Это утверждение может быть логически уменьшено до:

Я хочу, чтобы .c был красным, только если он является потомком, а не потомком .a

В этом случае

.a > .c { color: red; }