No. No es posible a través de CSS. Lleva la "Cascada" al corazón ;-).
Sin embargo, si puede agregar JavaScript a su página, un poco de jQuery podría llevarlo a su objetivo final.
Puede usar jQuery's findpara realizar una "anticipación" en su elemento / clase / id de destino, luego retroceder para seleccionar su objetivo.
Luego usa jQuery para reescribir el DOM (CSS) para su elemento.
Según esta respuesta de Mike Brant , el siguiente fragmento de jQuery podría ayudar.
$('p + ul').prev('p')
Esto primero selecciona todos los correos <ul>electrónicos que siguen inmediatamente a <p>.
Luego "retrocede" para seleccionar todos los <p>s anteriores de ese conjunto de <ul>s.
Efectivamente, se ha seleccionado "hermano anterior" a través de jQuery.
Ahora, use la .cssfunción para pasar sus nuevos valores CSS para ese elemento.
En mi caso, estaba buscando encontrar una manera de seleccionar un DIV con la identificación #full-width, pero SOLO si tenía un DIV descendiente (indirecto) con la clase de .companies.
Tenía el control de todo el HTML debajo .companies, pero no pude alterar ninguno de los HTML anteriores.
Y la cascada solo va en 1 dirección: hacia abajo.
Por lo tanto, podría seleccionar TODOS #full-widths.
O podría seleccionar .companiesque solo siguiera a #full-width.
Pero podría no seleccionar sólo #full-widthde que procedieron .companies .
Y, de nuevo, no pude agregar .companiesmás arriba en el HTML. Esa parte del HTML se escribió externamente y envolvió nuestro código.
Pero con jQuery, puedo seleccionar los #full-widths requeridos y luego asignar el estilo apropiado:
$("#full-width").find(".companies").parents("#full-width").css( "width", "300px" );
Esto encuentra todo #full-width .companiesy selecciona solo esos .companies, de forma similar a cómo se usan los selectores para apuntar a elementos específicos en estándar en CSS.
Luego se usa .parentspara "retroceder" y seleccionar TODOS los padres de .companies,
pero filtra esos resultados para mantener solo #fill-widthelementos, de modo que al final,
solo selecciona un #full-widthelemento si tiene un .companiesdescendiente de clase.
Finalmente, asigna un nuevo widthvalor CSS ( ) al elemento resultante.
$(".parent").find(".change-parent").parents(".parent").css( "background-color", "darkred");
div {
background-color: lightblue;
width: 120px;
height: 40px;
border: 1px solid gray;
padding: 5px;
}
.wrapper {
background-color: blue;
width: 250px;
height: 165px;
}
.parent {
background-color: green;
width: 200px;
height: 70px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<div class="wrapper">
<div class="parent">
"parent" turns red
<div class="change-parent">
descendant: "change-parent"
</div>
</div>
<div class="parent">
"parent" stays green
<div class="nope">
descendant: "nope"
</div>
</div>
</div>
Target <b>"<span style="color:darkgreen">parent</span>"</b> to turn <span style="color:red">red</span>.<br>
<b>Only</b> if it <b>has</b> a descendant of "change-parent".<br>
<br>
(reverse cascade, look ahead, parent un-descendant)
</html>
Documentos de referencia de jQuery:
$ () o jQuery () : elemento DOM.
. find : obtiene los descendientes de cada elemento en el conjunto actual de elementos coincidentes, filtrados por un selector, un objeto jQuery o un elemento.
. padres : Obtenga el hermano inmediatamente anterior de cada elemento en el conjunto de elementos coincidentes. Si se proporciona un selector, recupera el hermano anterior solo si coincide con ese selector (filtra los resultados para incluir solo los elementos / selectores enumerados).
. css : establece una o más propiedades CSS para el conjunto de elementos coincidentes.