:where() también tiene un truco de especificidad interesante.

Últimamente hay mucha expectativa sobre el :is()pseudo-selector, probablemente porque ahora que Safari 14 lo tiene, es compatible con todos los principales navegadores. Tienes a Miriam tuiteando al respecto, Kevin Powell haciendo un vídeo, Šime incluyéndolo en Web Platform News y Robin mencionándolo. Bramus realmente lo aclara con estos “tres hechos importantes”:

1. La lista de selectores de :is()es indulgente
2. La especificidad de :is()es la de su argumento más específico
3. :is()no funciona con selectores de pseudoelementos (por ahora)

Además, por supuesto, su funcionalidad principal hace que los selectores, que de otro modo serán bastante detallados, complejos y propensos a errores, sean más fáciles de escribir. Lo de la especificidad es muy interesante. Miriam nota algunos trucos que se pueden hacer con él, como aumentar la especificidad sin seleccionar nada.

Digamos que quieres usar la .buttonclase para seleccionar, pero dale mucha especificidad.

:is(.button, #increase#specificity) {  /* specificity is now (0, 1, 0, 0) instead of (0, 0, 1, 0)}

He hecho cosas tontas como esta en el pasado:

.button.button.button {  /* forcing the selector to be (0, 0, 3, 0) instead of (0, 0, 1, 0) */  /* doesn't actually require element to have three button classes lol */}

El :is()truco me parece un poco más comprensible.

Pero, ¿qué pasa si quieres ir al revés con la especificidad y reducirla? Bueno, ese es el objetivo del :where()pseudo-selector. Funcionalmente es exactamente igual que :is(). Le das una lista separada por comas de cosas para seleccionar como parte de la cadena de selección, y lo hace, con la misma naturaleza indulgente. Excepto que la especificidad de la :where()parte completa es cero (0).

Kevin mostró un problema interesante :is()en el video:

.card :is(.title, p) {  color: red;}.card p {  color: yellow;}

Se podría pensar yellowque ganará aquí, pero la presencia de .titleese :is()selector en la parte superior hace que la especificidad de ese selector (0, 0, 2, 0) gane sobre el (0, 0, 1, 1) a continuación.

¡Aquí es donde podríamos considerar usarlo :where()! Si usáramos el :where()pseudo-selector en su lugar:

.card :where(.title, p) {  color: red;}.card p {  color: yellow;}

Entonces el amarillo ganaría, porque el selector superior baja a la especificidad (0, 0, 1, 0), perdiendo ante la especificidad del selector inferior (0, 0, 1, 1).

¿Cual deberías usar? ¿Sabes qué? No estoy muy seguro de si aquí hay consejos súper sólidos y probados en el tiempo. Al menos tenemos ambas opciones disponibles, lo que significa que si te metes en un aprieto, tienes herramientas para usar. El tiempo me ha enseñado que mantener baja la especificidad es generalmente un lugar más saludable. Eso te da espacio para anular, donde si estás manejando alto con especificidad tienes menos opciones. Pero la especificidad cero :where()es bastante extrema y pude ver que eso también conduce a momentos confusos. Así que mi instinto me dice que tal vez quieras comenzar con :is(), a menos que notes que necesitas mezclar un selector de mayor especificidad; Si lo haces, regresa a :where().