Pseudo-classe :has() CSS

Definição e uso

CSS :has() Os pseudo-classes são usados para coincidir com qualquer elemento pai que tenha irmãos específicos ou conteúdo interno específico.

Uso exemplificativo:

• Esconda ou mostre elementos com base em irmãos específicos ou conteúdo interno
• Se houver conteúdo específico, alterne a layout
• Se o elemento pai tiver um irmão específico ou conteúdo interno, mude sua aparência

Exemplo

Exemplo 1

Defina o estilo do elemento <h2> que está imediatamente após o elemento <p>:

h2:has(+ p) {
  cor: cinza;
  cor-de-fundo: dourado;
  border: 2px pontilhado vermelho;
}

Experimente você mesmo

Exemplo 2

Defina o estilo do elemento <section> interno que contém o elemento <h1> e também o estilo do elemento <section> interno que contém a classe 'funfact':

section:has(h1) {
  cor-de-fundo: dourado;
}
section:has(.funfact) {
  cor: azul;
}

Experimente você mesmo

Exemplo 3

Defina o estilo do elemento <li> interno que contém o elemento <input> selecionado (dentro de <ul>):

ul li:has(input:checked) {
  border:2px solid marrom;
}

Experimente você mesmo

Sintaxe CSS

:has(lista-seletor-relativa) {
  declarações css;
}

Detalhes técnicos

Suporte do navegador

O número na tabela indica a versão do navegador que suporta completamente essa pseudo-classe pela primeira vez.