🔗Índice
1. Introducción
Los selectores son de los primeros temas con los que uno se topa al momento de querer aprender CSS y no es para menos. Con una buena base de selectores podremos ahorrar mucho tiempo al aplicar CSS en nuestros proyectos.
Los selectores más conocidos y usados son los de etiqueta, clase, id y los descendentes; pero puede que también te hayas encontrado con selectores un poco más avanzados como los de atributo, hijo directo, hermano adyacente o hermano general; todos muy útiles.
Podemos encontrar mucha mas información sobre estos selectores en paginas como web.dev de Google con grandiosas explicaciones.
Así mismo contamos con algunas pseudo-clases que nos ayudan a seleccionar elementos de nuestro DOM para aplicar sus estilos, estas pseudo-clases se denominan combinadores lógicos y son las que estudiaremos en este breve post.
2. La pseudo-clase :is
En CSS cuando queremos aplicar los mismos estilos a selectores diferentes podemos usar la sintaxis de , para agrupar estos selectores, por ejemplo:
Tenemos el siguiente código HTML:
<div class="container">
<h1 class="title">Hola</h1>
<p class="text">Lorem ipsum dolor sit amet.</p>
<span>End</span>
</div>
<p class="title">Lorem ipsum dolor sit amet.</p>
Y queremos aplicar estilos a todos los elementos que solo estén dentro de la clase .container:
.container .title,
.container .text,
.container span{
color: red;
}
Como vemos, en el ejemplo usamos sintaxis de , agrupando todos los selectores que queremos para aplicarles el estilo color:red; pero esto tiene un pequeño problema de legibilidad: el código es repetitivo puesto que la clase .container está escrita 3 veces. ¿Cómo mejorar esto?
Podemos usar la pseudo-clase funcional :is() que consiste en agrupar selectores para mejorar la legibilidad del código.
Decimos que
is()es una pseudo-clase funcional por que recibe parámetros como si se tratara de una función en programación.
Como vemos podemos lograr lo mismo de una manera más escalable y entendible solo escribiendo una sola vez la clase .container y agrupando entre los parámetros de :is() todas las clases y elementos que queramos que se apliquen los estilos.
3. La pseudo-clase :not
La pseudo-clase :not es muy útil para agrupar todos los criterios que no se cumplen en un selector CSS. Por ejemplo:
Tenemos estas cajas:
<div class="container">
<div class="caja-1 caja">1</div>
<div class="caja-2 caja">2</div>
<div class="caja-3">3</div>
<div class="caja-4 caja">4</div>
</div>
Que tienen los siguientes estilos:
.container {
display:flex;
gap: 5px;
}
.container :is(.caja-1, .caja-2, .caja-3, .caja-4){
width:50px;
height: 50px;
border: 1px solid #000;
background: blue;
display:flex;
font-size:1.5rem;
justify-content:center;
align-items:center;
}
El resultado sería el siguiente:
Ahora viene la pregunta: ¿Cómo puedo hacer que solo los elementos que no tengan la clase caja sean verdes? (Esta condición solo la cumple la caja 3)
Podría usar la pseudo-clase :nth-child solo para seleccionar la tercera caja y aplicar el estilo, esto funcionaria sin ningún problema.
.container :nth-child(3){
background:green;
}
Pero, ¿Qué pasa si tuviera 20 cajas? el código crecería mucho y será difícil de mantener y entender.
En lugar de ello, usaremos la pseudo-clase :not() y le pasaremos como parámetros todas aquellas clases que no queremos que se apliquen los estilos.
Nota como incrementamos el número de cajas y el código CSS es el mismo.
Nota que mejoramos el selector de cada caja individual usando el selector de atributo.
4. La pseudo-clase :has
has() a mi parecer actúa de manera muy similar a un típico if de toda la vida, puesto que busca el cumplimiento de condiciones para aplicar los estilos, esto con el complemento de otras psedo-clases convierten a has() en una herramienta muy poderosa.
Por ejemplo:
Usamos has() para aplicar estilos solo cuando nuestros containers tengan 3 cajas o más, sino no aplica nada.
Llámame loco pero para mi esto es un if en toda regla.
5. Referencias
- https://lenguajecss.com/css/selectores/combinador-is-where/
- https://lenguajecss.com/css/selectores/combinador-not/
- https://lenguajecss.com/css/selectores/combinador-has/
6. Conclusiones
Los combinadores de CSS son herramientas potentes que podemos usar para complementar los selectores clásicos que conocemos de CSS.
Se puede ganar tanto en legibilidad como el caso de aplicar :is() y not() como también en funcionalidad como el caso de :has().
Considero muy importante saber la existencia de estas herramientas de CSS que nos pueden ser útiles en futuros proyectos de desarrollo que tengamos.
Otros post de mi autoría que te pueden interesar:
Top comments (0)