CSS: no () selector. Aplicar estilo si el padre no existe
Estoy tratando de aplicar un estilo a un div basado en su clase padre. Estoy usando el selector: not () para seleccionar el div cuyo padre no es.container1
, el segundo div debería ser rojo, pero no funciona.
Ejemplo 1
.myDiv:not(.container1) > .myDiv {
color: red;
}
<div class="container1">
<div class="myDiv">Div 1</div>
</div>
<div class="container2">
<div class="myDiv">Div 2</div>
</div>
Ejemplo 2
.myDiv:not(.container1 .myDiv) {
color: red;
}
<div class="container1">
<div class="myDiv">Div 1</div>
</div>
<div class="container2">
<div class="myDiv">Div 2</div>
</div>
¿Es esto posible con CSS? ¿O mi sintaxis está apagada?