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

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

Adam Argyle

Cuando escribes CSS, a veces puedes terminar con largas listas de selectores para segmentar varios elementos con las mismas reglas de diseño. Por ejemplo, si deseas ajustar el color de alguna etiqueta <b> que se encuentre 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() y mejorar la legibilidad mientras evitas un selector largo:

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

La legibilidad y la conveniencia del selector más corto 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 seudoselectores funcionales.

Una imagen infinita de antes y después de usar :is()

Compatibilidad del navegador

:is()

Navegadores compatibles

  • 88
  • 88
  • 78
  • 14

Origen

:where()

Navegadores compatibles

  • 88
  • 88
  • 78
  • 14

Origen

Conoce a :is() y :where()

Estos son selectores de seudoclases funcionales. Observa la () al final y la forma en que comienzan con :. Considéralos como llamadas a funciones dinámicas del entorno de ejecución que coinciden con los 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 da el poder de anular o aumentar la especificidad.

Agrupación de selectores

Todo lo que :is() puede hacer respecto de la agrupación, también lo puede hacer :where(). Esto incluye usarse en cualquier lugar del selector, anidarlos y apilarlos. Flexibilidad completa de CSS que ya conoces y te gusta 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 seudoclases 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.

Cómo usar selectores simples y complejos con :is()

Para repasar los selectores, consulta el módulo de selectores de Aprende CSS. A continuación, se muestran algunos ejemplos de selectores simples y complejos que te ayudarán a 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 ahora, :is() y :where() son intercambiables sintácticamente. Es hora de ver en qué se diferencian.

Cuál es la diferencia entre :is() y :where()

Cuando se trata de especificidad, :is() y :where() difieren fuertemente. Para obtener más información sobre la especificidad, consulta el módulo de especificidad de Learn CSS.

En resumen

  • :where() no tiene especificidad.
    :where() elimina toda la especificidad de la lista del selector que se pasa como parámetros funcionales. Esta es la primera de su función de selección 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, de 100 puntos.

Elegir el selector de especificidad más alta de la lista solo fue un problema para mí cuando me entusiasmaba mucho la agrupación. Siempre pude mejorar la legibilidad moviendo el selector de especificidad alta a su propio selector, donde no tendría mucho 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 la biblioteca podría llegar a su fin. No habrá ninguna especificidad con la que competir cuando se escriba CSS. CSS lleva bastante tiempo trabajando en una función de agrupación como esta. Ya está aquí, y sigue siendo un territorio sin explorar. Diviértete creando hojas de estilo más pequeñas y eliminando comas.

Foto de Markus Winkler en Unsplash