1

Tenho a seguinte estrutura apenas para exemplo:

<div>
    <div class="filho">teste</div>
</div>

Tenho a classe .filho com um position: absolute; Gostaria de saber se através da classe .filho também consigo aplicar um position: relative; na div pai usando css ou sass apenas?

sei que posso criar uma classe para a div pai. Mas gostaria de saber se existe uma forma de selecionar um elemento pai através de um elemento filho em css. Pesquisei e não conseguir achar nada que me ajudasse!

1 Resposta 1

2

TL;DR: Não existem parent selectors no CSS (ainda).

Existem várias maneiras de dinamicamente selecionar o pai de um elemento, mas todas elas envolvem um pouco de JavaScript como, por exemplo, o método parent() do jQuery.

Usando SASS, você pode fazer algo usando o operador ampersand:

.filho{
  position: absolute;
  div &{
    position: relative;
  }
}

o que gera

.filho {
  position: absolute;
}
div .filho {
  position: relative;
}

Mas veja que você ainda precisa, de alguma maneira, referenciar o seletor pai, por mais genérico que ele seja. Aqui entra um pouco do conhecimento sobre cascateamento para talvez conseguir simular um comportamento dinâmico, mas este nunca será 100% preciso.

Este artigo fala sobre o problema em questão, e enfatiza o fato de que, usando CSS3 puro, é impossível fazer essa seleção do elemento pai. Existem até umas propostas de um novo pseudo-elemento para a nova especificação (algo como .teste:parent), mas isso ainda é um sonho distante.

3
  • Muito boa explicação. Valeu! ;)
    – alan
    Commented 15/08/2016 às 15:14
  • @alan, se a resposta lhe agradou, não esqueça de marca-la como correta, caso não apareça nenhuma outra que seja melhor! =) Commented 15/08/2016 às 15:17
  • 1
    Opa! Não conhecia essa opção! Mas agora está marcada!
    – alan
    Commented 15/08/2016 às 15:26

Você deve fazer log-in para responder a esta pergunta.

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