Seletor pai com CSS

153d atrás

Sempre foi simples selecionar um elemento filho com #CSS. Como no exemplo a seguir:

<li>
    <a class="active">Link 1</a>
</li>

<li>
    <a>Link 1</a>
</li>

<li>
    <a>Link 1</a>
</li>

Para selecionar o elemento filho direto do elemento "li" com a classe ".active", nós podemos usar o seguinte CSS, por exemplo:

li > a.active {
    color: red;
}

No entanto, não era possível tempos atrás estilizar o elemento pai, apenas com CSS. Isso mudou, agora é possível selecioná-lo com a pseudo-classe :has().

No CSS abaixo, vamos selecionar o elemento pai "li", que tenha um elemento filho "a" com a classe ".active".

li:has(> a.active) {
    background-color: yellow;
}

Nesse caso, mudamos a cor de background do elemento pai, a partir de um seletor do elemento filho.

Comentários (0)