Estilo condicional de elementos seleccionados en un contenedor de cuadrícula

Los calendarios, los carros de la compra, las galerías, los exploradores de archivos y las bibliotecas en línea son algunas situaciones en las que los elementos seleccionables se muestran en cuadrículas (es decir, enrejados cuadrados). Ya sabes, incluso esos controles de seguridad que te piden que selecciones todas las imágenes con cruces de peatones o lo que sea.

Encontré una forma ordenada de mostrar las opciones seleccionables en una cuadrícula. No, no recrear ese reCAPTCHA, sino simplemente poder seleccionar varios elementos. Y cuando se seleccionan dos o más elementos contiguos, podemos utilizar inteligente :nth-of-type combinadores, pseudo elementos y los :checked pseudo-clase para diseñarlos de una manera en la que se vean agrupados.

Toda la idea de los combinadores y pseudos para obtener las casillas de verificación redondeadas surgió de un artículo anterior que escribí. Era un diseño simple de una sola columna:

Esta vez, sin embargo, el efecto de redondeo se aplica a los elementos a lo largo de los ejes vertical y horizontal de una cuadrícula. No es necesario que haya leído mi último artículo sobre el estilo de las casillas de verificación para esto, ya que cubriré todo lo que necesita saber aquí. Pero si está interesado en una versión simplificada de lo que estamos haciendo en este artículo, entonces vale la pena echarle un vistazo.

Antes que empecemos…

Te será útil tomar nota de algunas cosas. Por ejemplo, estoy usando HTML y CSS estáticos en mi demostración en aras de la simplicidad. Dependiendo de su aplicación, es posible que deba generar la cuadrícula y los elementos en ella de forma dinámica. Estoy omitiendo comprobaciones prácticas de accesibilidad para centrarme en el efecto, pero definitivamente querrás considerar ese tipo de cosas en un entorno de producción.

Además, estoy usando CSS Grid para el diseño. Recomendaría lo mismo pero, por supuesto, es solo una preferencia personal y su millaje puede variar. Para mí, el uso de la cuadrícula me permite usar fácilmente los selectores de hermanos para apuntar a un artículo ::before y ::after pseudos

Por lo tanto, sea cual sea el estándar de diseño que desee utilizar en su aplicación, asegúrese de que los pseudos aún puedan orientarse en CSS y asegúrese de que el diseño permanezca intacto en diferentes navegadores y pantallas.

Comencemos ahora

Como habrá notado en la demostración anterior, marcar y desmarcar un elemento de casilla de verificación modifica el diseño de las casillas, dependiendo del estado de selección de las otras casillas de verificación a su alrededor. Esto es posible porque diseñé cada cuadro usando los pseudoelementos de sus elementos adyacentes en lugar de su propio elemento.

La siguiente figura muestra cómo el ::before pseudo-elementos de cajas en cada visión de conjunto (excepto la primera columna) se superponen los cuadros a su izquierda, y cómo el ::after pseudo-elementos de cajas en cada fila (excepto la primera fila) se superponen a los cuadros de arriba.

Aquí está el código base

El marcado es bastante sencillo:

<main> <input type=checkbox> <input type=checkbox> <input type=checkbox> <!-- more boxes -->
</main>

Hay algo más en el CSS inicial. Pero, primero, la cuadrícula en sí:

/* The grid */
main { display: grid; grid: repeat(5, 60px) / repeat(4, 85px); align-items: center; justify-items: center; margin: 0;
}

Esa es una cuadrícula de cinco filas y cuatro columnas que contienen casillas de verificación. Decidí eliminar la apariencia predeterminada de las casillas de verificación y luego darles mi propio fondo gris claro y bordes súper redondeados:

/* all checkboxes */
input { -webkit-appearance: none; appearance: none; background: #ddd; border-radius: 20px; cursor: pointer; display: grid; height: 40px; width: 60px; margin: 0;
}

Observe también que las casillas de verificación en sí mismas son cuadrículas. Esa es la clave para colocar su ::before y ::after pseudo-elementos. Hablando de eso, hagámoslo ahora:

/* pseudo-elements except for the first column and first row */
input:not(:nth-of-type(4n+1))::before,
input:nth-of-type(n+5)::after { content: ''; border-radius: 20px; grid-area: 1 / 1; pointer-events: none;
}

Solo estamos seleccionando los pseudoelementos de las casillas de verificación que no están en la primera columna o en la primera fila de la cuadrícula. input:not(:nth-of-type(4n+1)) comienza en la primera casilla de verificación, luego selecciona la ::before de cada cuarto elemento de allí. Pero fíjate que estamos diciendo :not(), así que realmente lo que estamos haciendo es saltar las ::before pseudo-elemento de cada cuarta casilla de verificación, comenzando por la primera. Luego estamos aplicando estilos a la ::after pseudo de cada casilla de verificación de la quinta.

Ahora podemos diseñar tanto el ::before y ::after pseudos para cada checkbox que no esté en la primera columna o fila de la grilla, para que se muevan hacia la izquierda o hacia arriba, respectivamente, ocultándolos por defecto.

/* pseudo-elements other than the first column */
input:not(:nth-of-type(4n+1))::before { transform: translatex(-85px);
} /* pseudo-elements other than the first row */
input:nth-of-type(n+5)::after { transform: translatey(-60px); }

Estilizando el :checked estado

Ahora viene el estilo de las casillas de verificación cuando están en un :checked estado. Primero, démosles un color, digamos un limegreen fondo:

input:checked { background: limegreen; }

Una casilla marcada debe poder cambiar el estilo de todas sus casillas marcadas adyacentes. En otras palabras, si seleccionamos la undécima casilla de verificación en la cuadrícula, también deberíamos poder diseñar las casillas que la rodean en la parte superior, inferior, izquierda y derecha.

Esto se hace apuntando a los pseudo-elementos correctos. ¿Como hacemos eso? Bueno, depende del número real de columnas en la cuadrícula. Aquí está el CSS si se marcan dos casillas adyacentes en una cuadrícula de 5⨉4:

/* a checked box's right borders (if the element to its right is checked) */
input:not(:nth-of-type(4n)):checked + input:checked::before { border-top-right-radius: 0; border-bottom-right-radius: 0; background: limegreen;
}
/* a checked box's bottom borders (if the element below is checked) */
input:nth-last-of-type(n+5):checked + * + * + * + input:checked::after { border-bottom-right-radius: 0; border-bottom-left-radius: 0; background: limegreen;
}
/* a checked box's adjacent (right side) checked box's left borders */
input:not(:nth-of-type(4n)):checked + input:checked + input::before { border-top-left-radius: 0; border-bottom-left-radius: 0; background: limegreen;
}
/* a checked box's adjacent (below) checked box's top borders */
input:not(:nth-of-type(4n)):checked + * + * + * + input:checked + input::before { border-top-left-radius: 0; border-top-right-radius: 0; background: limegreen;
}

Si lo prefiere, puede generar el código anterior de forma dinámica. Sin embargo, una cuadrícula típica, digamos una galería de imágenes, la cantidad de columnas será pequeña y probablemente una cantidad fija de elementos, mientras que las filas pueden seguir aumentando. Sobre todo si está diseñado para pantallas de móviles. Es por eso que este enfoque sigue siendo un camino eficiente a seguir. Si por alguna razón su aplicación tiene filas limitadas y columnas en expansión, considere rotar la cuadrícula hacia los lados porque, con un flujo de elementos, CSS Grid los organiza de izquierda a derecha y de arriba a abajo (es decir, fila por fila) .

También debemos agregar estilo a las últimas casillas de verificación de la cuadrícula; no todas están cubiertas por pseudoelementos, ya que son los últimos elementos de cada eje.

/* a checked box's (in last column) left borders */
input:nth-of-type(4n-1):checked + input:checked { border-top-left-radius: 0; border-bottom-left-radius: 0;
}
/* a checked box's (in last column) adjacent (below) checked box's top borders */
input:nth-of-type(4n):checked + * + * + * + input:checked { border-top-left-radius: 0; border-top-right-radius: 0;
}

¡Esos son algunos selectores complicados! El primero…

input:nth-of-type(4n-1):checked + input:checked

…básicamente está diciendo esto:

un marcado <input> elemento junto a un marcado <input> en la penúltima columna.

En los nth-of-type se calcula así:

4(0) - 1 = no match
4(1) - 1 = 3rd item
4(2) - 1 = 7th item
4(3) - 1 = 11th item
etc.

Entonces, comenzamos en la tercera casilla de verificación y seleccionamos una de cada cuatro desde allí. Y si una casilla de verificación en esa secuencia está marcada, también aplicamos estilo a las casillas de verificación adyacentes, si también están marcadas.

Y esta línea:

input:nth-of-type(4n):checked + * + * + * + input:checked

esta diciendo esto:

An <input> elemento siempre que esté marcada, es directamente adyacente a un elemento, que es directamente adyacente a otro elemento, que también es directamente adyacente a otro elemento, que, a su vez, es directamente adyacente a un <input> elemento que está en un estado marcado.

Lo que eso significa es que estamos seleccionando cada cuarta casilla de verificación que está marcada. Y si una casilla de verificación en esa secuencia está marcada, entonces diseñamos la siguiente cuarta casilla de verificación de esa casilla de verificación si también está marcada.

Poniéndolo en uso

Lo que acabamos de ver es el principio general y la lógica detrás del diseño. Una vez más, la utilidad de su aplicación dependerá del diseño de la cuadrícula.

Usé bordes redondeados, pero puedes probar otras formas o incluso experimentar con efectos de fondo (Temani te tiene cubierto para las ideas). Ahora que sabes cómo funciona la fórmula, el resto depende totalmente de tu imaginación.

Aquí hay una instancia de cómo podría verse en un calendario simple:

Nuevamente, esto es simplemente un prototipo aproximado que usa marcado estático. Y, habría muchas, muchas consideraciones de accesibilidad a tener en cuenta en una función de calendario.

---

¡Eso es un envoltorio! Bastante ordenado, ¿verdad? Quiero decir, no hay nada exactamente "nuevo" en lo que está pasando. Pero es un buen ejemplo de seleccionando cosas en CSS. Si dominamos técnicas de selección más avanzadas que usan combinadores y pseudos, entonces nuestros poderes de diseño pueden ir mucho más allá del diseño de un elemento; como vimos, podemos diseñar elementos de forma condicional en función del estado de otro elemento.

---

Estilo condicional de elementos seleccionados en un contenedor de cuadrícula publicado originalmente el Trucos CSS. Debieras obtener el boletín.

• Coinsmart. El mejor intercambio de Bitcoin y criptografía de Europa.
• Platoblockchain. Inteligencia del Metaverso Web3. Conocimiento amplificado. ACCESO LIBRE.
• CriptoHawk. Radar de altcoins. Prueba gratis.
• Fuente: https://css-tricks.com/conditionally-styling-selected-elements-in-a-grid-container/