:dónde

El :where()pseudo selector en CSS es funcionalmente idéntico al :is()psuedo selector en el sentido de que toma una lista de selectores separados por comas para compararlos, excepto que donde :is()se toma el más específico entre ellos como la especificidad de toda esa parte, the specificity of :where()siempre es cero (0 ). .

Por ejemplo:

main :where(h1, h2, h3) {  color: orange;}

Coincide como si escribieras ese selector así:

main h1, main h2, main h3 {  color: orange;}

…excepto que la especificidad del primer ejemplo anterior es (0, 0, 0, 1) para el selector de elemento único ( main) y no incluye la especificidad de nada en la :where()parte. Mientras que, en el segundo ejemplo, la especificidad es (0, 0, 0, 2) porque hay dos selectores de elementos.

Decidir sobre el manejo de la especificidad

Es una decisión difícil decidir si desea la especificidad de :is()o la especificidad cero de :where(), aunque podría argumentar que mantener la especificidad baja en general genera menos dolores de cabeza que trabajar con elementos que tienen una especificidad más alta.

Imagina un diseño clásico:

header/headermain/headeraside/asidefooter/footer

Si quiero seleccionar los enlaces en el encabezado y pie de página, podría…

:is(.header, .footer) a {  color: red;}

Ese selector es (0, 0, 1, 0), lo que significa que si escribiera:

header a {  color: orange;}

Ese selector es menos específico en (0, 0, 0, 2) y no anulará al otro. Pero si escribiera:

:where(.header, .footer) a {  color: red;}

Eso es solo (0, 0, 0, 1), por lo que mi anulación funcionará.

Quizás un ejemplo menos artificial sea seleccionar un encabezado por ID sin tener que recurrir a la especificidad del nivel de ID.

h3:where(#specific-header) {  outline: 1px solid yellow;}

Allí seleccionó un encabezado con una identificación específica. Los ID tienen una especificidad muy alta (0, 1, 0, 0), lo cual es difícil de anular, pero aquí logré seleccionar solo ese encabezado, pero no utilicé ninguna especificidad súper alta para hacerlo.

Selectores indulgentes

Cada seleccionador dentro de la lista separada por comas :where(x, y, z)es indulgente porque se ignora si no es válido. Esto es importante porque no borra todo el selector como lo hacen normalmente los selectores no válidos. Para más información ver cómo funciona con el :is()selector ya que es idéntico.

:where(h1, totally:fake) {  /* will still select h1 */}

Soporte del navegador

ES DECIR	Borde	Firefox	cromo	Safari	Ópera
No	88	78	88	14	74

androidcromo	Android Firefox	Navegador de Android	Safari en iOS	Ópera móvil
Hacer	Hacer	91	14.4	No

Más información

CSS :is() y :where() llegan a los navegadores

:dónde Chris Coyier

¿Qué hay de nuevo en CSS?

:dónde Chris Coyier

Noticias de la plataforma: Prefiere valores iniciales de fondo de Contraste, MathML, :is() y CSS

:dónde Sime Vidas

Relacionado

:si

:is(ul, ol) li { color: #f8a100; } :es donde Geoff Graham

:dónde

main :where(h1, h2, h3) { color: #f8a100; } :dónde Chris Coyier