Cristhian Medina
Marcia Hernández
Julieta Watts
Jorge Arias Argüelles
Mateo Roldán
¿Cuál es la diferencia entre usar :is() y usar la separación por comas?
Me explico:
section a, article a, aside a { color: red; text-decoration: none; } :is(section, article, aside) a { color: red; text-decoration: none; }
En los efectos prácticos no hay diferencia pero con el :is es más legible, conciso y escalable
La especificidad es la diferencia principal en algo así. Para el primer caso tenés tres selectores con tres especificidades asociadas a cada uno, con el :is(selector1, selector2,..., selector n) tendrás una única especificidad asociada concretamente la mayor que obtengas de los selectores que pases por parámetro (o sea, los que tengas dentro de los paréntesis) y a tu caso a la especificidad que tengas le sumarás la especificidad de un elemento que es 0001. Esa es la diferencia que yo encuentro entre ambos casos, concretamente en el ejemplo que mostras, la especificidad será la misma, pero si tuvieras un id metido en el :is() ganaría la segunda regla por especificidad para el navegador.
Tema de la clase: Uso de la pseudoclase :is en CSS.
Objetivo: Agrupar múltiples selectores para optimizar estilos web y reducir líneas de código.
Ejemplo básico:
h1, h2, h3 con un solo selector:
:is(h1, h2, h3) { color: darkblue; text-transform: uppercase; text-align: center; }
Ejemplo complejo:
article, section y aside, excluyendo un div:
:is(article, section, aside) a { color: red; text-decoration: none; font-weight: bold; }
Conclusión: La pseudoclase :is permite una escritura más limpia y eficiente en CSS.
:is
Se utiliza para aplicar estilos a elementos que coincidan con cualquiera de los selectores especificados como argumentos. Permitiendo agrupar estilos para distintos selectores.
Sintaxis
:is(selector1, selector2, selector3, ...) { /* reglas CSS */ }
Evaluación de especificidad
Al realizar la evaluación, el navegador adopta la especificidad del selector más específico de la lista de selectores que se proporciona como argumento.
Ejemplo
/*Para seleccionar el h2 dentro de cada contenedor tendría hacer lo siguiente*/ article h2, section h2, div h2{ background-color: teal; } /*Con :is() podemos simplificarlo así*/ :is(article, section, div) h2 { background-color: teal; }