Nuevos selectores de seudoclase funcionales de CSS :is() y :where()

Estas incorporaciones aparentemente pequeñas a la sintaxis del selector CSS tendrán un gran impacto.

Adam Argyle

Cuando escribes CSS, a veces puedes terminar con listas de selectores largas para segmentar varios elementos con las mismas reglas de diseño. Por ejemplo, si deseas ajustar el color de las etiquetas <b> que se encuentran dentro de un elemento de encabezado, puedes escribir lo siguiente:

h1 > b, h2 > b, h3 > b, h4 > b, h5 > b, h6 > b {
  color: hotpink;
}

En su lugar, puedes usar :is() para mejorar la legibilidad y evitar un selector largo:

:is(h1,h2,h3,h4,h5,h6) > b {
  color: hotpink;
}

La legibilidad y las comodidades de los selectores más cortos son solo una parte del valor que :is() y :where() aportan a CSS. En esta publicación, descubrirás la sintaxis y el valor de estos dos pseudoselectores funcionales.

Compatibilidad del navegador

:is()

:where()

Conoce a :is() y :where()

Estos son selectores de pseudoclases funcionales. Observa el () al final y la forma en que comienzan con :. Piensa en ellas como llamadas a funciones dinámicas del entorno de ejecución que coinciden con elementos. Cuando escribes CSS, te brindan una forma de agrupar elementos en el medio, el principio o el final de un selector. También pueden cambiar la especificidad, lo que te permite anularla o aumentarla.

Agrupación de selectores

:where() puede hacer lo mismo que :is() en cuanto a la agrupación. Esto incluye usarse en cualquier lugar del selector, anidarlos y apilarlos. La flexibilidad completa de CSS que conoces y te encanta. Estos son algunos ejemplos:

/* at the beginning */
:where(h1,h2,h3,h4,h5,h6) > b {
  color: hotpink;
}

/* in the middle */
article :is(header,footer) > p {
  color: gray;
}

/* at the end */
.dark-theme :where(button,a) {
  color: rebeccapurple;
}

/* multiple */
:is(.dark-theme, .dim-theme) :where(button,a) {
  color: rebeccapurple;
}

/* stacked */
:is(h1,h2):where(.hero,.subtitle) {
  text-transform: uppercase;
}

/* nested */
.hero:is(h1,h2,:is(.header,.boldest)) {
  font-weight: 900;
}

Cada uno de los ejemplos de selectores anteriores demuestra la flexibilidad de estas dos pseudoclases funcionales. Para encontrar áreas de tu código que podrían beneficiarse de :is() o :where(), busca selectores con varias comas y repetición de selectores.

Usa selectores simples y complejos con :is()

Para repasar los selectores, consulta el módulo de selectores en Aprende CSS. Estos son algunos ejemplos de selectores simples y complejos para ilustrar la capacidad:

article > :is(p,blockquote) {
  color: black;
}

:is(.dark-theme.hero > h1) {
  font-weight: bold;
}

article:is(.dark-theme:not(main .hero)) {
  font-size: 2rem;
}

Hasta el momento, :is() y :where() son sintácticamente intercambiables. Es hora de ver en qué se diferencian.

La diferencia entre :is() y :where()

En lo que respecta a la especificidad, :is() y :where() divergen mucho. Para actualizar tu conocimiento sobre la especificidad, consulta el módulo de especificidad en Learn CSS.

En resumen

• :where() no tiene especificidad.
  :where() anula toda la especificidad de la lista de selectores que se pasa como parámetros funcionales. Esta es una función nueva de su selector de tipos.
• :is() toma la especificidad de su selector más específico.
  :is(a,div,#id) tiene una puntuación de especificidad de un ID, 100 puntos.

Elegir el selector de mayor especificidad de la lista solo me resultó útil cuando me entusiasmaba demasiado la agrupación. Siempre pude mejorar la legibilidad moviendo el selector de alta especificidad a su propio selector, donde no tendría tanto impacto. Este es un ejemplo de lo que quiero decir:

article > :is(header, #nav) {
  background: white;
}

/* better as */
article > header,
article > #nav {
  background: white;
}

Con :where(), espero ver que las bibliotecas ofrezcan versiones sin especificidad. La competencia de especificidad entre los estilos de los autores y los estilos de las bibliotecas podría llegar a su fin. No habría especificidad con la que competir cuando se escribe CSS. CSS lleva bastante tiempo trabajando en una función de agrupación como esta, ya está disponible y sigue siendo un territorio poco explorado. Diviértete creando hojas de estilo más pequeñas y quitando comas.

Foto de Markus Winkler en Unsplash