27

Olá, existe alguma maneira de selecionar o elemento pai de outro elemento com CSS?

Para ser mais especifico, estou estudando em localhost usando a plataforma de fóruns phpBB3, quando uma mensagem é agradecida ela ganha a classe .bg1 (sendo que o padrão é .bg2).

Ambos .bg1 e bg2 são filhos diretos da classe .pannels, já essa não se altera estando a mensagem agradecida ou não.

Meu objetivo é estilizar a classe .pannels com um background-color:#eaf8e2 apenas se o elemento filho dela for o .bg1 caso seja o .bg2 gostaria de manter a cor #fff no background.

<div class="pannels">
    <div class="bg1"></div>
</div>

<div class="pannels">
    <div class="bg2"></div>
</div>
2
  • 1
    Por que você não faz isso utilizando jquery?
    – Paulo
    24/04/2014 às 18:24
  • 5
    Estarei utilizando amigo.. Só gostaria de saber se havia alguma maneira de fazer isso em CSS antes de usar jQuery...
    – Wagner'
    24/04/2014 às 21:42

2 Respostas 2

27

Não há atualmente nenhuma maneira de selecionar o pai de um elemento em CSS.

Nas especificações CSS, CSS2 e CSS3, não há nada nesse sentido, você vai ter que recorrer a JavaScript (ou jQuery, :has() selector) se você necessita selecionar um elemento pai.


Atualização na Especificação

Houve uma atualização nas especificações dos Seletores de Nível 4, onde a pseudo-class :has() parece ser a sintaxe escolhida para este proposito até o momento (Isto não é uma especificação final e pode sofrer mudanças, ou até mesmo ser removida por completo).

Isso não está disponível em nenhum browser até o momento (17/10/2017):

Com está pseudo-class a solução ao problema proposto na pergunta seria está:

div.pannels:has(> div.bg1) 
{ 
    /* styles serão aplicados ao "div.pannels" elemento que tenham um elemento filho "div.bg1"*/ 
}
12

A isso se dá o nome de parent-selector, sendo que não é possível fazer isso usando CSS3.

Isso já foi proposto, e algo parecido está para ser implementado pelos CSS4* seletores de nível 4, usando-se a marcação $ antes do seletor da hierarquia ao qual o estilo será aplicado.

* segundo a referência, CSS4 não existe, mas sim, seletores de nível 4.

EDIT: correção

Verificando pelo rascunho de especificação da W3C, é possível verificar que o símbolo atualmente proposto é o ! após o seletor a ser estilizado.

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 .