Nuevos selectores
Selector :is()Selector :where()Selector :has()Selector :not()

<< Variables Unidades >>

Selector :is()

Mediante la pseudoclase :is() podemos escribir selectores complejos de forma más compacta. Esta función recibe como argumentos una lista de selectores, y selecciona cualquier elemento que pueda ser seleccionado por un selector de esa lista. Esta pseudoclase antes se llamó :matches() y :any(). Veamos un ejemplo donde podemos abreviar una combinación de selectores

main .article1, main .article2, main .article3{
    border: 1px solid red;
}

Con :is() la especificidad se calcula sumando la más alta de sus parámetros, siendo en el ejemplo anterior (0,2,0), cuando .container .list/.menu sería (0,2,0), y .container ul (0,1,1).

Selector :where()

La pseudoclase :where() recibe como argumento una lista de selectores y selecciona cualquier elemento que pueda ser seleccionado por un selector de esa lista. La diferencia se encuentra con la especificidad, donde :is() tiene por especificidad su valor más alto y :where() en cambio es 0, es decir, su especificidad es la que está fuera del where (.container).

main :is(.article1, .article2, .article3){
    /* Selector Specificity: (0, 1, 1) */
    border: 1px solid red;
    margin: 5px;
}

main :where(.article1, .article2, .article3){
    /* Selector Specificity: (0, 0, 1) */
    border: 1px solid green;
    margin: 5px;
}

Selector :has()

El selector :has() selecciona un elemento precedido, si sus hijos cumplen una serie de criterios.

a:has(>img) { 
    /* Se aplica sobre el enlace sólo si en el interior existe una etiqueta img */
}
h1:has(+p) { 
    /* Selecciona un encabezados h1 con un párrafo  que inmediatamente vaya 
    seguido por un encabezado h1 de forma inmediata y aplica estilo a h1*/
}
article:has(>h2){
    color: blue;
}
article:has(>h2):has(>p){
    color: green;
}
/* h2:has(+p){
    color: pink;
} */

Selector :not()

La pseudoclase :not() nos permite seleccionar todos los elementos que no cumplan los criterios indicados en sus parámetros.

p:not(.general) {
    /* todos los párrafos que no pertenezcan a la clase general 
    se les aplicará dicho estilo */
}
article:not( p){
    color: purple;
}

<< Variables Unidades >>