Estilo condicional de elementos seleccionados en un contenedor de celosía trucos CSS

Calendarios, carritos de compras, galerías, buscadores de archivos y bibliotecas en línea son algunas situaciones en las que los elementos seleccionables se muestran en cuadrículas (es decir, cuadrículas cuadradas) Ya sabes, incluso esos controles de seguridad que te hacen seleccionar todas las imágenes con caminos peatonales o lo que sea.

Encontré una forma limpia de mostrar opciones seleccionables en línea. No, no estoy recreando este reCAPTCHA, solo puedo elegir algunos elementos. Y cuando se seleccionan dos o más elementos adyacentes, podemos usar smart :nth-of-type combinadores, pseudo - elementos y :checked pseudo-clase para diseñarlos de manera que se vean agrupados.

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

Esta vez, sin embargo, el efecto de redondeo se aplica a los elementos a lo largo de los ejes vertical y horizontal de la cuadrícula. No es necesario que lea mi último artículo sobre cómo diseñar cuadrados sobre este tema, ya que cubriré todo lo que necesita saber aquí. Pero si está interesado en una visión más débil de lo que hacemos en este artículo, vale la pena echarle un vistazo.

Antes de que comencemos…

Será útil que consideres algunas cosas. Por ejemplo, utilizo HTML y CSS estáticos en mi demostración para simplificar. Dependiendo de su aplicación, es posible que deba generar la red y los elementos en Omitir verificaciones prácticas de disponibilidad para concentrarse en el efecto, pero definitivamente querrá considerar estas cosas en un entorno de producción.

También uso CSS Grid para el diseño. Recomendaría lo mismo, pero por supuesto esto es solo una preferencia personal y su millaje puede variar. Para mí, usar una red me permite usar fácilmente selectores de hermanos para dirigir elementos ::before y ::after seudo.

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

Comencemos ahora

Como habrá notado en una demostración anterior, marcar y desmarcar una marca de verificación cambia el diseño de los cuadrados, según el estado de selección de los otros cuadrados a su alrededor. Esto es posible porque estilicé cada campo usando los pseudoelementos de sus elementos vecinos en lugar de mi propio elemento.

La siguiente figura muestra cómo ::before pseudo-elementos de cajas en cada columna (a excepción de la primera columna) se superponen los campos de la izquierda y cómo ::after pseudo-elementos de cajas en cada educar (excepto la primera línea) superponen los campos de arriba.

Aquí está el código básico

El marcado es bastante simple:

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

Sucede un poco más en el CSS inicial, pero primero, la red en sí:

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

Esta es una cuadrícula de cinco filas y cuatro columnas que contienen casillas de verificación. Decidí eliminar las casillas de verificación predeterminadas 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;
}

También tenga en cuenta que los cuadrados en sí mismos son rejillas, lo cual es clave para colocarlos ::before y ::after pseudo-elementos. Hablando de eso, hagamos esto 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;
}

Seleccionamos solo los pseudo-elementos de las casillas de verificación que no están en la primera columna o primera fila de la cuadrícula. input:not(:nth-of-type(4n+1)) comienza desde la primera casilla de verificación, luego selecciona ::before en cada cuarto elemento a partir de ahí. Pero fíjate, decimos :not()así que realmente lo que hacemos es salto a la comba en ::before un pseudo-elemento de cada cuarta casilla de verificación, comenzando con la primera. Luego aplicamos estilos a ::after pseudo en cada casilla de verificación desde la quinta.

Ahora podemos diseñar ambos ::before y ::after pseudo para cada casilla de verificación que no esté en la primera columna o fila de la grilla, para que se muevan hacia la izquierda o hacia arriba, respectivamente, ocultándolas 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); 
}

formación de :checked condición

Ahora viene la estilización de las casillas de verificación cuando están en un :checked Primero, démosles un color, digamos un limegreen antecedentes:

input:checked { background: limegreen; }

Una casilla marcada debe poder cambiar el estilo de todas las 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 los campos a su alrededor en la parte superior, inferior, izquierda y derecha.

Esto se hace apuntando a los pseudo-elementos correctos. Cómo hacemos esto? Bueno, depende del número real de columnas en la red. Aquí está CSS si se marcan dos cuadrados 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, en una cuadrícula típica, digamos una galería de imágenes, el número de columnas será pequeño y probablemente un número fijo de elementos, mientras que las filas pueden seguir creciendo. Especialmente si está diseñado para pantallas móviles. Es por eso que este enfoque sigue siendo una forma efectiva. Si por alguna razón su aplicación tiene filas limitadas y columnas en expansión, entonces considere rotar la cuadrícula hacia un lado, porque con una secuencia 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;
}

¡Estos son criadores difíciles! El primero ...

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

... básicamente dice esto:

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

Y en nth-of-type se calcula de la siguiente manera:

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

Entonces, comenzamos desde la tercera casilla de verificación y desde allí elegimos cada cuarta. Y si se selecciona una casilla de verificación en esta secuencia, aplicaremos estilo a las casillas adyacentes si también están marcadas.

Y esta línea:

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

Él dice esto:

Un <input> elemento, siempre que esté marcado, 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 elemento <input> un artículo que está en un estado verificado.

Esto significa que seleccionamos una de cada cuatro casillas de verificación que está marcada. Y si se selecciona una casilla de verificación en esta secuencia, aplicamos estilo a la próxima cuarta casilla de verificación de esta casilla, si también está marcada.

poner en uso

Lo que acabamos de ver es el principio general y la lógica detrás del diseño. Nuevamente, cuán útil sea en su aplicación dependerá del diseño de la red.

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

Este es un ejemplo de cómo se vería un calendario normal:

Una vez más, este es solo un prototipo aproximado que usa marcas estáticas y habría muchas, muchas consideraciones de accesibilidad que deben tenerse en cuenta en la función de calendario.

---

¡Esto es una concha! Bastante limpio, ¿no? Quiero decir que no hay nada exactamente "nuevo" en lo que está sucediendo. Pero este es un buen ejemplo de selección de cosas en CSS. Si tenemos técnicas de selección más sofisticadas que usan combinadores y pseudo, entonces nuestras fuerzas de estilo pueden ir mucho más allá de la estilización de un elemento; como hemos visto, podemos estilizar condicionalmente elementos basados ​​en el estado de otro elemento.