Novedades CSS: pseudo-class is()
CSS es un lenguaje que no para de crecer. Y un ejemplo de eso son las nuevas pseudo-class :is(), where() y :has().
En este artículo, vamos a aprender en particular a utilizar la pseudo-class is(), verás que es muy fácil de entender y aplicar.
Tabla de Contenidos
Qué permite la pseudo-class is()
Es una característica relativamente nueva en CSS que permite aplicar estilos a múltiples elementos en una sola regla. Es una herramienta valiosa para escribir código más eficiente y flexible, y mejorar la compatibilidad con los navegadores.
Como las variables CSS que vimos en otro articulo, te va a simplificar la vida.
Soporte de is() CSS
Según la página «Can I Use«, la pseudo-clase :is() en CSS actualmente (febrero de 2023) tiene un soporte moderado en los navegadores modernos.
La pseudo-clase :is() es compatible con los siguientes navegadores:
- Google Chrome: soporte completo desde la versión 69.
- Mozilla Firefox: soporte completo desde la versión 63.
- Apple Safari: soporte completo desde la versión 14.
- Microsoft Edge: soporte completo desde la versión 88.
Sin embargo, todavía hay algunos navegadores que no soportan esta pseudo-class, como Internet Explorer 11. Por lo tanto, es importante tener en cuenta que su uso puede afectar la compatibilidad con navegadores antiguos o menos comunes.
En general, se recomienda comprobar la compatibilidad de la pseudo-class :is() en los navegadores específicos que se van a utilizar antes de implementarla en un proyecto.
Ejemplos de uso de la pseudo-class is()
Aunque su soporte no sea aún del todo, como se puede comprobar en can i use, es importante empezar a aprender a utilizarlas.
Vamos a ver algunos ejemplos de uso:
1 Aplicar estilos a los elementos con una clase específica
<p class="fondo">Este es un párrafo destacado</p> <span class="fondo">Este es un span destacado</span> <strong class="fondo">Este es un strong destacado</strong>
En vez de utilizar multiples selectores:
.highlight:is(p, span, strong) {
background-color: yellow;
}
En este ejemplo, se aplicará un fondo amarillo tanto a los elementos <p> como a los elementos <span> y <strong>que tengan la clase fondo.
Otro ejemplo es el siguiente:
.bold:is(strong, b) {
font-weight: bold;
}
En este caso, se aplicará un estilo de texto en resaltado tanto a los elementos <strong> como a los elementos <b> que tengan la clase bold.
2 Aplicar estilos a los elementos hijos de un elemento padre con una clase específica
<section class="container">
<p>Este es un párrafo dentro de una sección con clase container</p>
</section>
<div class="container">
<p>Este es un párrafo dentro de un div con clase container</p>
</div>
section:is(.container) > p {
font-size: 16px;
}
3 Cambiar el estilo de los enlaces en función de su atributo target
Puedes utilizar la pseudo-clase :is() para cambiar el estilo de los enlaces en función de su atributo target. Por ejemplo:
a:is([target="_blank"]) {
color: blue;
}
En este ejemplo, se aplicará un color azul a todos los enlaces que tengan un atributo target igual a «_blank».
Otro ejemplo es el siguiente:
<a href="#" target="_blank" rel="noopener">Este enlace abre en una nueva pestaña</a> <a href="#" target="_self">Este enlace abre en la misma pestaña</a>
a:is([target="_self"]),
a:is([target="_parent"]) {
color: red;
}
En este caso, se aplicará un color rojo tanto a los enlaces que tengan un atributo target igual a «_self» como a los enlaces que tengan un atributo target igual a «_parent».
4 Aplicar estilo a otras pseudo-clases como :hover o :focus
La pseudo-clase :is() se utiliza para aplicar estilos a elementos que coincidan con cualquiera de los selectores especificados como argumentos. Por ejemplo, puedes utilizar :is() para aplicar estilos a un elemento <button> cuando se encuentra en un estado :hover o :focus.
button:is(:hover),
button:is(:focus) {
background-color: yellow;
}
En el ejemplo anterior, se aplicará un fondo amarillo tanto al elemento <button> cuando se encuentre en un estado :hover como cuando se encuentre en un estado :focus.
Otros ejemplos son los siguientes:
p:is(:first-child),
h1:is(:last-child) {
color: blue;
}
En este caso, se aplicará un color azul tanto al primer hijo de un elemento <p> como al último hijo de un elemento <h1>.
a:is([target="_blank"]):hover {
text-decoration: underline;
}
En este ejemplo, se aplicará un subrayado a los enlaces que tengan un atributo target igual a «_blank» cuando el usuario los pase por encima con el ratón.
Las ventajas de utilizar la pseudo-class is() en CSS
A pesar de que su soporte aún no sea total, hay varias razones por las que es interesante aprender a utilizar la pseudo-clase :is() en CSS:
- Mayor eficiencia y claridad: La pseudo-clase :is() permite escribir reglas CSS más cortas y claras, lo que a su vez mejora la legibilidad y la eficiencia del código. En lugar de escribir varias reglas para cada tipo de elemento que se desea estilizar, se pueden escribir una sola regla que incluya todos los elementos.
- Mayor flexibilidad en el diseño: La pseudo-clase :is() permite aplicar estilos a múltiples elementos en una sola regla, lo que significa que los estilos pueden cambiar fácilmente en función de las necesidades del diseño.
- Mejora la compatibilidad con navegadores: Al utilizar la pseudo-clase :is(), es posible escribir reglas CSS que sean compatibles con más navegadores, ya que se pueden incluir múltiples selectores en una sola regla.
- Menor tamaño de archivo CSS: La pseudo-clase :is() permite escribir reglas CSS más cortas y eficientes, lo que a su vez reduce el tamaño total del archivo CSS. Esto puede mejorar la velocidad de carga.
En resumen, la pseudo-clase :is() es una herramienta valiosa para cualquier desarrollador de CSS que busque escribir código más eficiente, flexible y compatible con navegadores. Además, permite una mayor claridad y eficiencia en las reglas CSS, y mejora la compatibilidad con los navegadores y el tamaño total del archivo CSS.
Os animo a empezar a utilizarla y cualquier pregunta podéis dejar un comentario 🙂