CSS не выбрать первый класс между другим контейнером

Question

css не выбирает первый класс

:not(:first) не работает, потому что .callout упакован в другой контейнер

.callout:not(:first) {
  color: red;
}

<div class="d-flex">
    <div class="flex-fill">
        <div class="callout">
            Text A
        </div>
    </div>
    <div class="flex-fill">
        <div class="callout">
            Text B - only this set color red
        </div>
    </div>
</div>

Answer 1

Выберите элемент .callout, родительский элемент которого не является :first-child его родительского элемента

.flex-fill:not(:first-child) .callout {
   color: red
}

Или просто измените логику и выберите :last-child

.flex-fill:last-child .callout {
   color: red
}

Или наведите указатель на .callout внутри второго родительского элемента, независимо от того, сколько у вас есть .flex-fill братьев и сестер

.flex-fill:nth-child(2) .callout {
   color: red
}

Пример Codepen

---

В любом случае, я не рекомендую использовать этот тип селекторов или полагаться на определенную структуру разметки, потому что этот подход может легко вызвать проблемы сопровождения по мере роста кода и, если возможно, я бы предложил вместо этого разместитьспециальный класс для этой цели на нужном элементе.