:has

Una de las características más celebradas en Css desde border-radius..

Ahora podemos definir estilos a un elemento si contiene otro. article:has(img) { ... }

:has acepta selectores complejos, lo que nos abre un mundo de posibilidades. Se puede combinar con :not, incluso con pseudo clases como :hover, :checked o :invalid.

Elementos hermanos previos, con lo que podemos selecionar el previo y el posterior.

Recomendación

A dia de hoy, Global 92.79% en caniuse, no recomiendo usar :has de manera indiscriminada en producción.

Si lo hacemos, siempre facilitando una alternativa para navegadores que no lo soporten.

@supports not selector(:has(*)) {
  /* Navegadores que no soportan :has */
}
@supports selector(:has(*)) {
  /* Navegadores que soportan :has */
}

Recetas

Evitar scroll en el body si dialog está abierto.

Algunos de los casos de uso, en los links relacionados encontraréis más aplicaciones.

body:has(dialog[open]) {
   overflow: clip;
}

Demo en Codepen

Cambiar el layout si no existe un elemento con grid-template-areas

.wrapper {
    grid-template-areas:
        "header header"
        "aside main"
        "footer footer"
    ;
}   

.wrapper:has(blockquote) {
    grid-template-areas:
        "blockquote blockquote"
        "header header"
        "aside main"
        "footer footer"
    ;
}   

Demo en Codepen

Filtrar elementos por atributo con variables Css con select

Para elementos no dinámicos.

:root {
    --display: none;
    
    &:has([value="default"]:checked) {
        --display: inline;
    }

Demo en codepen

Dar estilos a un elemento anterior

p:has( + .second ) {
    color: tomato;
} 

Demo en Codepen