:active


Le pseudo sélecteur :active modifie l'apparence d'un lien lorsqu'il est activé (par exemple en cliquant dessus). Il donne un feedback indiquant que le lien a bien été cliqué. Une utilisation typique est donc dans un lien <a href="#"> comme ceci (petit déplacement vers le bas) :

See the Pen :active state by CSS-Tricks Team (@css-tricks) on CodePen.

Mais on peut vraiment l'appliquer à n'importe quel élément. Dans l'exemple suivant, où que vous cliquiez sur la page, celle-ci deviendra jaune (tant que vous maintenez le clic) :

See the Pen Demo of the :active psuedo class by CSS-Tricks Team (@css-tricks) on CodePen.

Il est de bonne pratique de couvrir tous les états, en particulier pour les liens, et pour ce faire il faut suivre l'ordre LOVE HATE, c'est à dire :

L :link
O
V :visited
E

H :hover
A :active
T
E

//CSS

a:link { /* Essentially means a[href], or that the link actually goes somewhere */
  color: blue;
}
a:visited {
  color: purple;
}
a:hover {
  color: green;
}
a:active {
  color: red;
}

Si vous ne suivez pas cet ordre, par exemple si vous indiquiez :visited en dernier, si l'on visitait ce lien il prendrait la précédence sur les déclarations :active et :hover et le lien serait toujours violet, même si vous le survoliez ou s'il était actif.


Autres ressources à consulter sur ce sujet :


Cet article est pour l'essentiel tiré de l'almanach de CSS-Tricks de Chris Coyier, avec son aimable autorisation.

Sur l'auteur : est designer, blogger, conférencier. Créateur de CSS-Tricks, de CodePen, animateur du Podcast Shop Talk, il est l'auteur avec Jeff Starr de "Digging into WordPress". Vous pouvez le retrouver sur Twitter, Google+.

NdT : CSS-Tricks est un site ressource d'une richesse exceptionnelle, axé sur CSS et le web design en général. Vous pouvez suivre son actualité sur Twitter, Facebook, YouTube, GitHub. Mélange d'articles, de vidéos, de forums, de ressources diverses (jetez un coup d'oeil à son "Almanac" ), il est très populaire sur le web anglophone.

CodePen est un site où vous pouvez tester votre code, faire des maquettes, proposer vos dernières créations et recueillir les observations de vos pairs. C'est aussi une source d'inspiration pour vos propres designs.