Não. Não é possível via CSS. Leva o "Cascade" ao coração ;-).
No entanto, se você conseguir adicionar JavaScript à sua página, um pouco de jQuery poderá levá-lo ao seu objetivo final.
Você pode usar o jQuery findpara executar um "olhar em frente" em seu elemento / classe / ID de destino e depois voltar para selecionar seu destino.
Então você usa o jQuery para reescrever o DOM (CSS) para seu elemento.
Com base nesta resposta de Mike Brant , o seguinte trecho de jQuery pode ajudar.
$('p + ul').prev('p')
Isso primeiro seleciona todos os <ul>s que seguem imediatamente a <p>.
Em seguida, "recua" para selecionar todos os <p>s anteriores desse conjunto de <ul>s.
Efetivamente, "irmão anterior" foi selecionado via jQuery.
Agora, use a .cssfunção para passar no seu CSS novos valores para esse elemento.
No meu caso, eu estava procurando uma maneira de selecionar um DIV com o id #full-width, mas SOMENTE se ele tivesse um DIV descendente (indireto) com a classe de .companies.
Eu tinha o controle de todo o HTML abaixo .companies, mas não podia alterar nenhum do HTML acima dele.
E a cascata segue apenas 1 direção: para baixo.
Assim, eu poderia selecionar ALL #full-widths.
Ou eu poderia selecionar .companiesque apenas seguisse a #full-width.
Mas eu poderia não selecionar apenas #full-widths que procedeu .companies .
E, novamente, não consegui adicionar .companies mais no HTML. Essa parte do HTML foi escrita externamente e envolveu nosso código.
Porém, com o jQuery, posso selecionar os #full-widths necessários e atribuir o estilo apropriado:
$("#full-width").find(".companies").parents("#full-width").css( "width", "300px" );
Isso encontra tudo #full-width .companiese seleciona apenas aqueles .companiessemelhantes à maneira como os seletores são usados para direcionar elementos específicos no padrão em CSS.
Em seguida, ele usa .parents"backtrack" e seleciona TODOS os pais de .companies,
mas filtra esses resultados para manter apenas #fill-widthelementos, para que, no final,
selecione apenas um #full-widthelemento se tiver um .companiesdescendente de classe.
Por fim, atribui um novo widthvalor CSS ( ) ao 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 referência do jQuery:
$ () ou jQuery () : elemento DOM.
. find : obtenha os descendentes de cada elemento no conjunto atual de elementos correspondentes, filtrados por um seletor, objeto jQuery ou elemento.
. pais : obtenha o irmão imediatamente anterior de cada elemento no conjunto de elementos correspondentes. Se um seletor for fornecido, ele recuperará o irmão anterior apenas se corresponder a esse seletor (filtra os resultados para incluir apenas os elementos / seletores listados).
. css : defina uma ou mais propriedades CSS para o conjunto de elementos correspondentes.