Definir o estilo pai através do filho [duplicado]

Question

Definir o estilo pai através do filho [duplicado]

Esta pergunta já tem uma resposta:

Há algum selector de pais do CSS? 27 Respostas

Digamos que tenho o seguinte:<ul>:

<ul>
<li>Child</li>
<li><span class="active">Child</span></li>
<li>Child</li>
</ul>

É possível para mim mudar o estilo do <li> através do active <span>?

por exemplo:

.active:parent(li) {
    background-color: red;
}

Consegui isto com o jQuery, mas continua a piscar. a tela por um segundo split (esperando o DOM para carregar) e eu quero evitar isso.

0

css css-selectors

Author: Temani Afif, 2018-02-08

Source

2 answers

score 1 · Answer 1

Isto é impossível com css puro, porque a css não consegue apanhar o bakward.

você deve usar javascript ou jquery:

$(document).ready(function(){
    $('li').has('.active').css('background-color','yellow');
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<ul>
    <li>Child</li>
    <li><span class="active">Child</span></li>
    <li>Child</li>
</ul>

score 0 · Answer 2

Não há maneira de fazer isto na CSS. A melhor coisa a fazer seria fazer algo como:

<ul class="has-active">
    <li>Child</li>
    <li><span class="active">Child</span></li>
    <li>Child</li>
</ul>

E estilo

ul.has-active  {
    ...
}

Se está à procura de algo que possa fazer os selectores pais, então olhe para algo como xpath .