Le combinateur d’adjacence en CSS

Le combinateur d'adjacence en CSS permet d'effectuer une transition sur un élément voisin.
Il existe deux types de combinateurs adjacents: direct et indirect. Nous allons voir ici le combinateur adjacent direct.

Le combinateur adjacent direct

Pour mettre en place un combinateur adjacent direct, vous allez assigner à la pseudoclasse le signe + suivi du nom de l'élément voisin.

Reprenons l'exemple du tutoriel précédent sur les transitions en CSS, avec l'animation sur le bouton qui s'agrandissait.
Nous allons maintenant faire en sorte que le cercle situé à ses côtés s'agrandissent également au survol du bouton.

N'hésitez pas à faire des tests sur codepen pour bien comprendre le fonctionnement.

See the Pen
Le combinateur adjacent direct
by anna (@cds-creation-de-site)
on CodePen.

Merci de suivre et liker 🙂
error

Vous aimez ce blog ? Merci de liker ou passer le mot :)

Retour haut de page