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

Le 15/01/2015

Aujourd'hui le BlogDuWebdesign vous propose de découvrir un sélecteur CSS trop méconnue : le tilde.

Visez vos voisins avec la tilde

Si vous observez le pen suivant, vous remarquerez qu'il n'utilise pas de Javascript. Il fonctionne uniquement en CSS grâce à l'opérateur "~" (Non, ne c'est pas une moustache, c'est un tilde).

See the Pen ◌̃ #3 : Rating stars by Benjamin SANCHEZ (@B_Sanchez) on CodePen.

Le tilde permet en CSS 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)