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

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

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)

Cela peut permettre de créer des hovers beaucoup plus riches en éléments, ou pour des éléments qui ne supportent pas les pseudos-éléments before et after, comme les inputs.

Disponibilité dans les anciens navigateurs.

Comme nous le montre Can i Use, les navigateurs supportent le tilde depuis ie7. Il n'y a donc aucune excuse pour ne pas l'utiliser !

Exemples

Voilà trois petits exemples que je vous ai prévus pour illustrer le genre de situation dans lesquelles ils peuvent être utiles.

Une aide contextuelle pour inputs

See the Pen ◌̃ #1 : Input help on focus by Benjamin SANCHEZ (@B_Sanchez) on CodePen.

Un radio élément personnalisé

See the Pen ◌̃ #2 : Chose your mustache by Benjamin SANCHEZ (@B_Sanchez) on CodePen.

Un système de notation par étoiles

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