:is( )
is() es una pseudo-clase de CSS que recibe una lista de selectores para así poder crear reglas de coincidencia de una manera mucho más sencilla. Facilitando el escribir agrupaciones de selectores complejas.
/* Sin is() ❌ */
header a,
section a,
footer a {
color: tomato;
text-decoration: none;
}
/* Con is() ✅ */
:is(header, section, footer) a {
color: tomato;
text-decoration: none;
}En un inicio, la propuesta de esta pseudo-clase era :any(), que posteriormente paso a ser :matches(), y que finalmente termino con el nombre de :is().
Esto es importante porque los navegadores más antiguos soportan mucho mejor :matches() y :any() con el uso de prefijos y hasta cierto punto.
:-webkit-any(div, section) p {
font-size: 19px;
}
:-moz-any(div, section) p {
font-size: 19px;
}
:matches(div, section) p } {
font-size: 19px;
}
Te recomiendo ver el soporte actual de cada característica, para así decidir que es lo mejor para tu código.
Uso
Como ya mencione anteriormente, el papel de is() es crear reglas de coincidencia de una manera mucho más sencilla y fácil de leer.
Por ejemplo, seleccionar todos los encabezados que puedan estar en ciertos elementos en concreto.
/* Sin is() ❌ */
main h1, main h2, main h3, main h4, main h5, main h6,
section h1, section h2, section h3, section h4, section h5, section h6,
article h1, article h2, article h3, article h4, article h5, article h6 {
font-weight: 300;
color: coral;
}
/* Con is() ✅ */
:is(main, section, article) :is(h1, h2, h3, h4, h5, h6) {
font-weight: 300;
color: coral;
}
Incluso se puede combinar con otras pseudo-clases de CSS:
input:is(:focus, :hover) {
background-color: aqua;
}