1

Tenho a seguinte estrutura no HTML:

<div class="panel">
     ...
</div>

<div class="panel">
    <div class="controls"> 
       ...
    </div>
</div>

A classe panel tem alguns estilos gerais e eu gostaria de alterar o padding-right dela apenas quando ela contiver como filha a classe controls.

Sei que se fosse ao contrário, se quisesse alterar a classe controls só se ela fosse filha de panel, o seletor no CSS ficaria:

.panel .controls {
  ...
}

Ou:

.panel > .controls {
   ...
}

Mas e para alterar a classe panel só se ela tiver como filha a classe controls? Existe seletor pra isso?

0

1 Resposta 1

1

Atualmente (maio/2021) não é possível fazer isso com CSS.

Existe esta proposta para o pseudo-seletor :has. Com ele seria possível ter algo como:

/* seleciona os elementos com a classe panel, mas só se tiver filho com a classe control */
.panel:has(> .controls) {
    estilos...
}

Mas isso ainda não é suportado pelos browsers. Ou seja, por enquanto não tem como fazer com CSS, então uma alternativa seria recorrer ao JavaScript. Ex:

// para todos os elementos com class=panel
for (const elemento of document.querySelectorAll('.panel')) {
    // verifica se tem controls dentro do elemento, e aplica um estilo diferente para cada caso
    if (elemento.querySelector('.controls')) { // tem
        elemento.style.color = "yellow";
    } else { // não tem
        elemento.style.color = "green";
    }
}
.panel {
  /* será sobrescrito pelo JavaScript */
  color: blue;
}

.panel .controls {
  color: red;
}
<div class="panel">
     verde
</div>

<div class="panel">
    amarelo
    <div class="controls"> 
       vermelho
    </div>
</div>

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .