TechWeb
Accueil Codage HTML CSS DESIGN XML LaboCSS

Les pseudo-classes

Les liens

:link

Le sélecteur a:link désigne les liens hypertextes non visités. A la différence du sélecteur a, qui concerne tous les éléments a, le sélecteur a:link ne concerne que les éléments a dotés d'un attribut href.

:visited

Le sélecteur a:visited désigne les liens hypertextes déjà visités

:hover

Le sélecteur a:hover désigne un lien survolé. La pseudo-classe a:hover est une classe dynamique.

:active

Le sélecteur a:active désigne un lien cliqué. La pseudo-classe a:hover est une classe dynamique.

exemple

a:link

{
color: #33CC33;
text-decoration: none;
}

a:visited

{
color: #666666;
}

a:hover

{
color: #FF6600;
}

a:active

{
color: #FF0000;
}

Produira le lien réactif suivant :

définitions

Généralisation

La pseudo-classe :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

{
color: blue;
background-color:yellow;
}

Cette généralisation n'est pas opérationnelle avec Intenet Explorer 6.

Ordre des définitions

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.

La pseudo-classe :focus

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.

exemple

:focus

{
background: #66FF33;
font-size:20px; color:red;
}

a:focus

{
background: yellow
}

a:focus:hover

{
background: red, color:white;
}

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é.

un lien un autre lien

Les propriété applicables à un élément focalisé dépendent de ce dernier et du rendu du navigateur.

La pseudo-classe lang()

Cette pseudo-classe vise les éléments dotés de l'attribut lang

Exemple

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)

{
color:red;
}

span:lang(en)

{
color:green;
}

h4:lang(fr)

{
color:blue; margin-left:20px;
}

Affichera :

un petit exemple

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

La pseudo-classe first:child

Cette pseudo-classe permet d'identifier un élément qui est le premier enfant de son parent.

Exemple

<blockquote>

<p>premier paragraphe inclu dans blockquote</p>
<p>second paragraphe inclu dans blockquote</p>

</blockquote>

blockquote p:first-child

{
color : red;
}

premier paragraphe inclu dans blockquote

second paragraphe inclu dans blockquote

dernier paragraphe inclu dans blockquote

Valid XHTML 1.0 Strict Valid CSS!

Copyright Gabriel Braun 2007