Apprenez à vous passer du Javascript avec le sélecteur tilde CSS ~

Le 15/01/2015

Vous pensez que certaines interactions dynamiques sur le web nécessitent forcément du JavaScript ? Détrompez-vous. Nous vous invitons à redécouvrir un sélecteur CSS souvent méconnu : le tilde CSS (~). Grâce à cet opérateur, il est possible de créer des effets interactifs tels que des systèmes de notation par étoiles ou des aides contextuelles, le tout sans une seule ligne de JavaScript.

Découvrez des exemples concrets de l'utilisation du tilde CSS pour enrichir vos interfaces tout en allégeant votre code et en conservant une expérience utilisateur fluide et engageante.

Visez vos voisins avec le tilde CSS

Le tilde CSS permet de sélectionner les éléments qui suivent un autre élément. Il s'utilise comme le + ou le >.

Dans l'exemple suivant, j'ai sélectionné l'objet C en bleu clair, et demandé aux div suivantes de prendre une autre couleur. N'hésitez pas à cliquer sur les onglets "HTML" ou "Resultat" du pen (le bloc de texte sur fond noir en dessous de ce paragraphe), et à lire les commentaires pour bien comprendre !

/* L'objet C est bleu clair*/ .C{ background: lightblue; } /* Tout les objets suivants seront d'une encore autre couleur */ .C ~ div{ background: cadetblue; } /* Il est evidemment possible d'utiliser d'autres selecteurs comme :hover, par exemple */ div:hover ~ div{ border-color: blue; } /* Cette partie n'set la que pour la presentation, nous pouvons l'oublier */ div{ float: left; width: 50px; height: 50px; background: #CCC; margin-right: 10px; border: solid 3px transparent; }

See the Pen 462b5d085e0559d0fd1de7b892441a76 by Benjamin SANCHEZ (@B_Sanchez) on CodePen.

Pour mieux comprendre son utilisation, je vous renvoie à l'exercice 13 de CSS Dinner (Il n'y a pas de deep linking, il faudra le sélectionner dans le menu).