CSS селектор: не (...) [у родителя есть какой-то класс]

Question

Я хочу выбрать все теги с классом p , который является потомком .row

.row .p {
   ...
}

, но исключить все, которые имеют .отключить как родительский класс (не напрямую).

Я могу выбрать оба из них так:

.row .p {
  border: 3px solid blue;
}

.disable .row .p {
  border: 3px solid red;;
}

Но мы хотим использовать только один селектор

ПРИМЕЧАНИЕ: между .disable и .row могут быть любыми элементами.

ОЧИСТКА: .disable .row .p не должно иметь цвет привсе.Так что, если .disable как-то присутствует в родительской строке, НЕ делайте синюю рамку.просто оставьте это.

пример: https://codepen.io/miladfm/pen/ELbwMx

Answer 1

Используя пользовательские свойства CSS (он же CSS-переменные), вы можете стилизовать элемент в соответствии с каким-либо предком, если вы установите значение для этого предка и получите его значение для первого. Он наследуется по всему могущественному каскаду® , и если он не установлен, вы можете иметь значение по умолчанию, заданное запасным значением var(--custom-prop, fallback)

Поддержка Edge 15+ или 16+ и других современных браузеров для более длительного времени AFAIK

/* If any ascendant has a given class, no border */
.disable {
  --parent-disable-border: none;
}

/* Default border with fallback value of a CSS Variable / Custom Property */
.p {
  border: var(--parent-disable-border, 3px solid blue);
}

Codepen (извините, фрагмент не работает в Firefox)