a:link
{a:visited
{a:hover
{a:active
{Produira le lien réactif suivant :
La pseudo-classes :hover peuvent s'appliquer à tout élément. Ainsi il est possible de rendre un paragraphe, comme celui-ci, sensible au survol de la souris grâce à la définition suivante :
p:hover
{Cette généralisation n'est pas opérationnelle avec Intenet Explorer mais fonctionne parfaitement sur Mozilla.
Pour obtenir le comportement attendu, est indispensable de respecter l'ordre a:link, a:visited a:hover a:active en raison des règles de la cascade.
Les pages web contiennent des éléments interactifs tels les liens, les champs ou les boutons de formulaire. Les navigateur permettent en général de les les focaliser successivement avec la touche tab. La pseudo-classe :focus permet de mettre en évidence l'élément d'une page couramment focalisée.
:focus
{a:focus
{a:focus:hover
{La première règle s'applique à tout élément focalisé dans la page. La seconde ne s'applique qu'aux liens focalisés et la dernière s'applique à un lien focalisé survolé.
Les propriété applicables à un élément focalisé dépendent de ce dernier et du rendu du navigateur.
Cette pseudo-classe vise les éléments dotés de l'attribut lang
Soit le code
<h4>un petit exemple</h4>
<p>Les québéquois parlent de <span lang="fr-ca">magazinage</span> alors que les français parlent des<span lang="fr"> courses</span> ou de <span lang="en">shopping</span> qui est un angliscisme.</p>
et la définition de style suivante :
span:lang(fr)
{span:lang(en)
{h4:lang(fr)
{Affichera :
Les québéquois parlent de magazinage alors que les français parlent des courses ou de shopping qui est un angliscisme.
Dans cet exemple
Cette pseudo-classe permet d'identifier un élément qui est le premier enfant de son parent.
<blockquote>
</blockquote>
blockquote p:first-child
{premier paragraphe inclu dans blockquote
second paragraphe inclu dans blockquote
dernier paragraphe inclu dans blockquote