Stylisation conditionnelle des éléments sélectionnés dans un conteneur de grille

Les calendriers, les paniers d'achat, les galeries, les explorateurs de fichiers et les bibliothèques en ligne sont des situations où les éléments sélectionnables sont affichés dans des grilles (c'est-à-dire des treillis carrés). Vous savez, même ces contrôles de sécurité qui vous demandent de sélectionner toutes les images avec des passages pour piétons ou autre.

J'ai trouvé un moyen pratique d'afficher les options sélectionnables dans une grille. Non, ne pas recréer ce reCAPTCHA, mais simplement pouvoir sélectionner plusieurs éléments. Et lorsque deux ou plusieurs éléments contigus sont sélectionnés, nous pouvons utiliser astucieusement :nth-of-type les combinateurs, les pseudo-éléments et les :checked pseudo-classe pour les styliser de manière à ce qu'ils semblent regroupés.

Toute l'idée des combinateurs et des pseudos pour obtenir les cases à cocher arrondies est venue d'un article précédent que j'ai écrit. Il s'agissait d'une conception simple à une seule colonne :

Cette fois, cependant, l'effet d'arrondi est appliqué aux éléments le long des axes vertical et horizontal d'une grille. Vous n'avez pas besoin d'avoir lu mon dernier article sur le style des cases à cocher pour cela, car je vais couvrir tout ce que vous devez savoir ici. Mais si vous êtes intéressé par une version simplifiée de ce que nous faisons dans cet article, alors celui-ci vaut la peine d'être vérifié.

Avant de commencer…

Il vous sera utile de prendre note de quelques éléments. Par exemple, j'utilise HTML et CSS statiques dans ma démo par souci de simplicité. En fonction de votre application, vous devrez peut-être générer dynamiquement la grille et les éléments qu'elle contient. Je laisse de côté les vérifications pratiques de l'accessibilité afin de me concentrer sur l'effet, mais vous voudriez certainement envisager ce genre de chose dans un environnement de production.

De plus, j'utilise CSS Grid pour la mise en page. Je recommanderais la même chose mais, bien sûr, ce n'est qu'une préférence personnelle et votre kilométrage peut varier. Pour moi, l'utilisation de la grille me permet d'utiliser facilement des sélecteurs frères pour cibler un élément ::before ainsi que ::after pseudos.

Par conséquent, quelle que soit la norme de mise en page que vous souhaitez utiliser dans votre application, assurez-vous que les pseudos peuvent toujours être ciblés dans CSS et assurez-vous que la mise en page reste intacte sur différents navigateurs et écrans.

Commençons maintenant

Comme vous l'avez peut-être remarqué dans la démo précédente, cocher et décocher un élément de case à cocher modifie la conception des cases, en fonction de l'état de sélection des autres cases à cocher qui l'entourent. Ceci est possible car j'ai stylisé chaque boîte en utilisant les pseudo-éléments de ses éléments adjacents au lieu de son propre élément.

La figure suivante montre comment le ::before pseudo-éléments de boîtes dans chaque colonne (sauf la première colonne) chevauchent les cases à leur gauche, et comment les ::after pseudo-éléments de boîtes dans chaque rangée (sauf la première ligne) chevauchent les cases ci-dessus.

Voici le code de base

Le balisage est assez simple :

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

Il y a un peu plus de choses dans le CSS initial. Mais, d'abord, la grille elle-même :

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

C'est une grille de cinq lignes et quatre colonnes contenant des cases à cocher. J'ai décidé d'effacer l'apparence par défaut des cases à cocher, puis de leur donner mon propre fond gris clair et des bordures super arrondies :

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

Notez également que les cases à cocher elles-mêmes sont des grilles. C'est la clé pour placer leur ::before ainsi que ::after pseudo-éléments. En parlant de ça, faisons ça maintenant :

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

Nous ne sélectionnons que les pseudo-éléments des cases à cocher qui ne sont pas dans la première colonne ou la première ligne de la grille. input:not(:nth-of-type(4n+1)) commence à la première case à cocher, puis sélectionne le ::before de chaque quatrième élément à partir de là. Mais remarquez que nous disons :not(), donc vraiment ce que nous faisons est saut le ::before pseudo-élément de chaque quatrième case à cocher, en commençant par la première. Ensuite, nous appliquons des styles au ::after pseudo de chaque case à cocher à partir de la cinquième.

Maintenant, nous pouvons styliser à la fois le ::before ainsi que ::after des pseudos pour chaque case à cocher qui ne se trouve pas dans la première colonne ou ligne de la grille, de sorte qu'ils sont déplacés vers la gauche ou vers le haut, respectivement, en les masquant par défaut.

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

Styliser le :checked Etat

Vient maintenant le style des cases à cocher lorsqu'elles sont dans un :checked Etat. D'abord, donnons-leur une couleur, disons un limegreen fond:

input:checked { background: limegreen; }

Une case cochée doit pouvoir modifier le style de toutes ses cases cochées adjacentes. En d'autres termes, si nous sélectionnons la onzième case à cocher dans la grille, nous devrions également pouvoir styliser les cases qui l'entourent en haut, en bas, à gauche et à droite.

Cela se fait en ciblant les bons pseudo-éléments. Comment fait-on cela? Eh bien, cela dépend du nombre réel de colonnes dans la grille. Voici le CSS si deux cases adjacentes sont cochées dans une grille 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 vous préférez, vous pouvez générer dynamiquement le code ci-dessus. Cependant, une grille typique, disons une galerie d'images, le nombre de colonnes sera petit et probablement un nombre fixe d'éléments, alors que les lignes pourraient continuer à augmenter. Surtout s'il est conçu pour les écrans mobiles. C'est pourquoi cette approche reste une voie efficace. Si, pour une raison quelconque, votre application a des lignes limitées et des colonnes en expansion, envisagez de faire pivoter la grille sur le côté car, avec un flux d'éléments, CSS Grid les organise de gauche à droite et de haut en bas (c'est-à-dire ligne par ligne) .

Nous devons également ajouter un style pour les dernières cases à cocher de la grille - elles ne sont pas toutes couvertes par des pseudo-éléments car ce sont les derniers éléments de chaque axe.

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

Ce sont des sélecteurs délicats ! Le premier…

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

… est en train de dire ceci :

Un coché <input> élément à côté d'une coche <input> dans l'avant-dernière colonne.

Et aux nth-of-type se calcule ainsi :

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

Donc, nous commençons à la troisième case à cocher et en sélectionnons toutes les quatre à partir de là. Et si une case à cocher dans cette séquence est cochée, nous stylisons également les cases à cocher adjacentes, si elles sont également cochées.

Et cette ligne :

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

Est-ce à dire ceci :

An <input> élément fourni qui est coché, est directement adjacent à un élément, qui est directement adjacent à un autre élément, qui est également directement adjacent à un autre élément, qui, à son tour, est directement adjacent à un <input> élément qui est dans un état coché.

Cela signifie que nous sélectionnons toutes les quatre cases cochées. Et si une case à cocher dans cette séquence est cochée, nous stylisons la quatrième case à cocher suivante à partir de cette case si elle est également cochée.

L'utiliser

Ce que nous venons d'examiner est le principe général et la logique derrière la conception. Encore une fois, son utilité dans votre application dépendra de la conception de la grille.

J'ai utilisé des bordures arrondies, mais vous pouvez essayer d'autres formes ou même expérimenter avec des effets d'arrière-plan (Temani vous propose des idées). Maintenant que vous savez comment fonctionne la formule, le reste dépend entièrement de votre imagination.

Voici un exemple de ce à quoi cela pourrait ressembler dans un calendrier simple :

Encore une fois, il ne s'agit que d'un prototype approximatif utilisant un balisage statique. Et, il y aurait beaucoup, beaucoup de considérations d'accessibilité à prendre en compte dans une fonctionnalité de calendrier.

---

C'est un enveloppement ! Plutôt chouette, non ? Je veux dire, il n'y a rien d'exactement « nouveau » dans ce qui se passe. Mais c'est un bon exemple de sélectionner des choses en CSS. Si nous maîtrisons des techniques de sélection plus avancées qui utilisent des combinateurs et des pseudos, alors nos pouvoirs de style peuvent aller bien au-delà du style d'un élément - comme nous l'avons vu, nous pouvons conditionner le style des éléments en fonction de l'état d'un autre élément.

---

Stylisation conditionnelle des éléments sélectionnés dans un conteneur de grille publié à l'origine le Astuces CSS. Vous devriez recevoir le bulletin.

• Coinsmart. Le meilleur échange Bitcoin et Crypto d'Europe.
• Platoblockchain. Intelligence métaverse Web3. Connaissance amplifiée. ACCÈS LIBRE.
• CryptoHawk. Radar Altcoins. Essai gratuit.
• Source : https://css-tricks.com/conditionally-styling-selected-elements-in-a-grid-container/