27547 sujets

CSS et mise en forme, CSS3

Bonjour,
je regardais une feuille de style et je suis tombé sur cette syntaxe


.link:hover:after,.link.hover:after {
  left:100%;
}


je comprends ce qu'elle fait, mais je ne comprends pas la syntaxe des sélécteurs, quelqu'un peut m'aider ?
merci.
Modérateur
Salut,

La virgule veut dire qu'il y a deux sélecteurs :
.link:hover:after

et
.link.hover:after


Pour le premier on a 3 éléments :
.link
:hover
:after

donc la classe .link, le :hover quand l'élément est survolé et le :after qui cible le pseudo élément (on devrait l'écrire ::after d'ailleur). Donc en gros le pseudo élément ::after aura un left:100% si son bloc parent .link est survolé.

pour le second il y a une nuance :
.link
.hover
:after

il ya deux classes .link et .hover et toujours le pseudo élément after. Donc la le ::after a un left de 100% si sont parent possède les classes link ET hover.