Stile condizionale degli elementi selezionati in un contenitore della griglia

Calendari, carrelli della spesa, gallerie, esploratori di file e librerie online sono alcune situazioni in cui gli elementi selezionabili sono mostrati in griglie (cioè reticoli quadrati). Sai, anche quei controlli di sicurezza che ti chiedono di selezionare tutte le immagini con i passaggi pedonali o altro.

Ho trovato un modo accurato per visualizzare le opzioni selezionabili in una griglia. No, non ricreare quel reCAPTCHA, ma semplicemente essere in grado di selezionare più elementi. E quando vengono selezionati due o più elementi adiacenti, possiamo usare intelligente :nth-of-type combinatori, pseudo elementi e il :checked pseudo-classe per modellarli in un modo in cui sembrano raggruppati.

L'intera idea di combinatori e pseudo per ottenere le caselle di controllo arrotondate è venuta da a articolo precedente che ho scritto. Era un semplice design a colonna singola:

Questa volta, tuttavia, l'effetto arrotondamento viene applicato agli elementi lungo l'asse verticale e orizzontale su una griglia. Non devi aver letto il mio ultimo articolo sullo stile delle caselle di controllo per questo poiché tratterò tutto ciò che devi sapere qui. Ma se sei interessato a una visione più snella di ciò che stiamo facendo in questo articolo, allora vale la pena dare un'occhiata.

Prima di iniziare...

Ti sarà utile prendere nota di alcune cose. Ad esempio, sto usando HTML statico e CSS nella mia demo per semplicità. A seconda dell'applicazione potrebbe essere necessario generare la griglia e gli elementi in essa contenuti in modo dinamico. Tralascio i controlli pratici per l'accessibilità per concentrarmi sull'effetto, ma vorresti sicuramente considerare questo genere di cose in un ambiente di produzione.

Inoltre, sto usando CSS Grid per il layout. Consiglierei lo stesso ma, ovviamente, è solo una preferenza personale e il tuo chilometraggio può variare. Per me, l'uso della griglia mi consente di utilizzare facilmente i selettori fratelli per scegliere come target un elemento ::before ed ::after pseudo.

Quindi, qualunque sia lo standard di layout che potresti voler utilizzare nella tua applicazione, assicurati che gli pseudos possano ancora essere presi di mira in CSS e assicurati che il layout rimanga intatto su diversi browser e schermi.

Cominciamo adesso

Come avrai notato nella demo precedente, selezionare e deselezionare un elemento checkbox modifica il design delle caselle, a seconda dello stato di selezione delle altre caselle di controllo attorno ad esso. Questo è possibile perché ho disegnato ogni scatola usando gli pseudo-elementi dei suoi elementi adiacenti invece del proprio elemento.

La figura seguente mostra come il ::before pseudo-elementi di scatole in ciascuno colonna (tranne la prima colonna) si sovrappongono alle caselle alla loro sinistra, e come il ::after pseudo-elementi di scatole in ciascuno fila (tranne la prima riga) si sovrappongono alle caselle sopra.

Ecco il codice base

Il markup è piuttosto semplice:

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

C'è un po' di più in corso nel CSS iniziale. Ma, prima, la griglia stessa:

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

Questa è una griglia di cinque righe e quattro colonne che contengono caselle di controllo. Ho deciso di cancellare l'aspetto predefinito delle caselle di controllo, quindi di dare loro il mio sfondo grigio chiaro e i bordi super arrotondati:

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

Notare anche che le caselle di controllo stesse sono griglie. Questa è la chiave per posizionare il loro ::before ed ::after pseudo-elementi. A proposito, facciamolo ora:

/* 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;
}

Stiamo solo selezionando gli pseudo-elementi delle caselle di controllo che non sono nella prima colonna o nella prima riga della griglia. input:not(:nth-of-type(4n+1)) inizia dalla prima casella di controllo, quindi seleziona il ::before di ogni quarto elemento da lì. Ma nota che stiamo dicendo :not(), quindi davvero quello che stiamo facendo è saltare , il ::before pseudo-elemento di ogni quarta casella di controllo, a partire dalla prima. Quindi stiamo applicando gli stili al ::after pseudo di ogni checkbox dalla quinta.

Ora possiamo modellare entrambi i ::before ed ::after pseudos per ogni casella di controllo che non si trova nella prima colonna o riga della griglia, in modo che vengano spostati rispettivamente a sinistra o in alto, nascondendoli per impostazione predefinita.

/* 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); }

Styling il :checked stato

Ora arriva lo stile delle caselle di controllo quando sono in a :checked stato. Per prima cosa, diamo loro un colore, diciamo a limegreen sfondo:

input:checked { background: limegreen; }

Una casella selezionata dovrebbe essere in grado di modificare lo stile di tutte le sue caselle selezionate adiacenti. In altre parole, se selezioniamo l'undicesima casella di controllo nella griglia, dovremmo anche essere in grado di definire lo stile delle caselle che la circondano in alto, in basso, a sinistra ea destra.

Questo viene fatto prendendo di mira gli pseudo-elementi corretti. Come lo facciamo? Bene, dipende dal numero effettivo di colonne nella griglia. Ecco il CSS se due caselle adiacenti sono selezionate in una griglia 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;
}

Se preferisci puoi generare il codice sopra in modo dinamico. Tuttavia, una griglia tipica, ad esempio una galleria di immagini, il numero di colonne sarà piccolo e probabilmente un numero fisso di elementi, mentre le righe potrebbero continuare ad aumentare. Soprattutto se progettato per schermi mobili. Ecco perché questo approccio è ancora un modo efficiente da percorrere. Se per qualche motivo la tua applicazione ha righe limitate e colonne espandibili, considera la possibilità di ruotare la griglia lateralmente perché, con un flusso di elementi, CSS Grid li dispone da sinistra a destra e dall'alto verso il basso (cioè riga per riga) .

Abbiamo anche bisogno di aggiungere uno stile per le ultime caselle di controllo nella griglia: non sono tutte coperte da pseudo-elementi in quanto sono gli ultimi elementi in ciascun asse.

/* 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;
}

Questi sono alcuni selettori difficili! Il primo…

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

...in pratica sta dicendo questo:

A controllato <input> elemento accanto a un selezionato <input> nella penultima colonna.

E la nth-of-type si calcola così:

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

Quindi, stiamo iniziando dalla terza casella di controllo e selezionando ogni quarta da lì. E se una casella di controllo in quella sequenza è selezionata, stiliamo anche le caselle di controllo adiacenti, se anch'esse sono selezionate.

E questa riga:

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

Sta dicendo questo:

An <input> elemento a condizione che sia selezionato, è direttamente adiacente ad un elemento, che è direttamente adiacente ad un altro elemento, che è anche direttamente adiacente ad un altro elemento, che, a sua volta, è direttamente adiacente ad un <input> elemento che si trova in uno stato selezionato.

Ciò significa che stiamo selezionando ogni quarta casella di controllo selezionata. E se una casella di controllo in quella sequenza è selezionata, stiliamo la quarta casella di controllo successiva da quella casella di controllo, se anche questa è selezionata.

Metterlo in pratica

Quello che abbiamo appena esaminato è il principio generale e la logica alla base del design. Ancora una volta, quanto sia utile nella tua applicazione dipenderà dal design della griglia.

Ho usato bordi arrotondati, ma puoi provare altre forme o anche sperimentare effetti di sfondo (Temani ti ha coperto di idee). Ora che sai come funziona la formula, il resto dipende totalmente dalla tua immaginazione.

Ecco un esempio di come potrebbe apparire in un semplice calendario:

Ancora una volta, questo è semplicemente un prototipo approssimativo che utilizza il markup statico. E ci sarebbero molte, molte considerazioni sull'accessibilità da considerare in una funzione di calendario.

---

Questo è un involucro! Abbastanza pulito, vero? Voglio dire, non c'è niente di esattamente “nuovo” in quello che sta succedendo. Ma è un buon esempio di selezionando le cose nei CSS. Se disponiamo di tecniche di selezione più avanzate che utilizzano combinatori e pseudos, i nostri poteri di styling possono andare ben oltre lo stile di un elemento: come abbiamo visto, possiamo applicare uno stile condizionale agli oggetti in base allo stato di un altro elemento.

---

Stile condizionale degli elementi selezionati in un contenitore della griglia originariamente pubblicato il CSS-Tricks. Dovresti ricevi la newsletter.

• Coinsmart. Il miglior scambio di bitcoin e criptovalute d'Europa.
• Platoblockchain. Web3 Metaverse Intelligence. Conoscenza amplificata. ACCESSO LIBERO.
• Criptofalco. Radar Altcoin. Prova gratuita.
• Fonte: https://css-tricks.com/conditionally-styling-selected-elements-in-a-grid-container/