Selector WHERE en CSS

Selector WHERE en CSS

CSS

En CSS :where() es un selector de pseudo-clase que mejora la legibilidad.

La función de pseudoclase CSS :where() toma una lista de selectores como su argumento y selecciona cualquier elemento que pueda ser seleccionado por uno de los selectores en esa lista.

En CSS, cuando se usa una lista de selectores, si alguno de los selectores no es válido, la lista completa se considera no válida. Al usar :where() en lugar de que la lista completa de selectores se considere inválida si uno falla al analizar, se ignorará el selector incorrecto o no admitido y se usarán los demás.

Ejemplo

Por ejemplo si antes querías definir que todos los elementos span de una etiqueta h* tuviera un color green lo harías así:

h1 > span,
h2 > span,
h3 > span,
h4 > span,
h5 > span,
h6 > span {
    color:green;
}

Si utilizas el :where(), sería de esta forma:

:where(h1,h2,h3,h4,h5,h6) > span {
    color:green;
}

Como puedes comprobar, utilizando menos código conseguimos lo mismo, y de una forma mucho más legible.

Compatibilidad

Este selector es compatible con las versiones modernas de todos los navegadores, a excepción de Internet Explorer.

Escribe una respuesta