Pseudoclase :has() de CSS

Definición y uso

CSS :has() Los pseudoclases se utilizan para coincidir con cualquier elemento padre que tenga elementos hermanos específicos o contenido interno

Ejemplo de uso:

• Oculta o muestra elementos basándose en elementos hermanos específicos o contenido interno
• Cambia el diseño si hay contenido específico
• Hace que el aspecto del elemento padre sea diferente si tiene elementos hermanos de un tipo específico o contenido interno

Ejemplo

Ejemplo 1

Establece el estilo del elemento <h2> que sigue inmediatamente al elemento <p>:

h2:has(+ p) {
  color: gris;
  color_fondo: oro;
  borde: 2px punteado rojo;
}

Prueba por ti mismo

Ejemplo 2

Establece el estilo del elemento <section> que contiene el elemento <h1> internamente, al mismo tiempo que establece el estilo del elemento <section> que contiene la clase funfact internamente:

section:has(h1) {
  color_fondo: oro;
}
section:has(.funfact) {
  color: azul;
}

Prueba por ti mismo

Ejemplo 3

Establece el estilo del elemento <li> que contiene el <input> seleccionado internamente (dentro de <ul>):

ul li:has(input:checked) {
  borde:2px sólido ciruela;
}

Prueba por ti mismo

Sintaxis CSS

:has(lista-selector-relativa) {
  declaraciones css;
}

Detalles técnicos

Compatibilidad del navegador

El número en la tabla especifica la versión del navegador que primero admite esta pseudoclase.