Las CSS no paran de crecer. Cada cierto tiempo aparecen cosas nuevas que nos permiten llegar un poquito más lejos en lo que respecta a la aplicación de estilos en las páginas web. Hoy vamos a abordar una herramienta aparecida entre los selectores de nivel 4 de CSS, que no es otra que la pseudo-clase :where().

Qué es :where()

La pseudoclase :where() es una herramienta de selección de elementos del documento HTML que trabaja con una serie de argumentos, como una función en los lenguajes de programación. :where() permite seleccionar elementos que apliquen a cualquiera de los argumentos indicados por separado.

Lo podemos ver bien con un ejemplo:

:where(h1, header) {
    border: 2px solid orange;
}

Esto aplicaría un borde naranja a los elementos h1 y header de la página. En realidad, tal como se ha definido, sería similar a especificar los estilos de esta manera:

h1, header {
  border: 2px solid orange;
}

¿Qué novedad aporta la pseudoclase :where()?

Quizás con el ejemplo anterior no hemos acabado de apreciar qué es lo que nos aporta :where() que no tuviésemos anteriormente en CSS por medio de la agrupación de selectores ya conocidos. Vamos a intentar dar algunas explicaciones sobre este punto.

Selectores más resumidos

Veamos ahora el siguiente ejemplo, en el que hemos usado el selector :where() pero mezclado con otro selector de etiqueta, que nos produce un código CSS más compacto y menos verboso.

section :where(h2, p, ul) {
    color: blue; 
}

Ese selector sería muy similar al que podemos ver a continuación.

section h2, section p, section ul {
    color: brown; 
}

Como estás pudiendo observar, el selector :where() nos ahorra especificar una y otra vez la etiqueta donde lo necesitamos combinar, con lo que ahorramos algo de código.

Diferencias en la especificidad

Quizás el punto anterior tampoco te haya parecido muy útil o necesario. Pero existe otra diferencia más importante y que no resulta nada desdeñable. Consiste en que el selector :where() no tiene especificidad, es decir, suma cero a la especificidad de los selectores que teníamos anteriormente.

Veamos de nuevo un ejemplo para explicar este detalle. Si las anteriores reglas de CSS las tuvieras escritas en un mismo archivo de código, en este orden:

section h2, section p, section ul {
    color: brown; 
}

section :where(h2, p, ul) {
    color: blue; 
}

¿Qué color piensas que tendrían los textos de los h2, p y ul de los elementos section?

Si solo nos limitamos a pensar en la cascada de CSS podríamos decir que el color sería azul (blue), por haberse escrito después. Sin embargo, como hemos dicho anteriormente, el selector aplicado con :where() le suma especificidad 0. Por ello, en este caso el color que aplicará realmente el navegador es marrón (brown).

Esto nos puede dar otra pista de dónde podemos usar :where(), justamente donde queramos que la especificidad de esta pseudoclase no altere la especificidad del selector anterior.

Evitar especificidades altas

Otro ejemplo que deriva de lo que hemos aprendido sobre la especificidad de :where lo tienes en este estilo:

:where(#idelemento) {
  background-color: green;
}

En este caso podríamos seleccionar un elemento usando su identificador aunque en este caso la especificidad de este selector no será la del selector de identificador, por lo que podría redefinirse más adelante con otros selectores de especificidad inferior a la de id.

Imaginando que tenemos un header así:

<header id="myheader">
    <h1>CSS Herramientas!!!</h1>
</header>

Si tuviésemos estos dos estilos de CSS:

:where(#myheader) {
    background-color: aquamarine;
}

header {
    background-color: beige;
}

A pesar que el selector de identificador es siempre superior, dado que está en una pseudoclase :where(), estaría por debajo de la especificidad de etiqueta y por tanto se podría sobreescribir más adelante. Por ello, en el caso anterior, el color de fondo de la cabecera sería "beige".

Conclusión :where de CSS

Hemos conocido el selector de nivel 4 por pseudo-clase :where(). Quizás no sea imprescindible aplicarla en todos los proyectos, pero en muchos casos puede resultarnos de utilidad. Por supuesto, nunca viene mal contar con otra alternativa dentro de nuestro kit de herramientas CSS.