Les pseudo-classes en CSS

Les pseudo-classes permettent de préciser certaines mises en forme CSS, non pas à des éléments reconnus par leur identifiant ou par leur classe, mais par à un évènement (comme :visited pour les liens) ou à une position (comme :first-child pour détecter la 1ère occurrence d’un élément).

Utiliser clear sur un bloc float sans balise HTML :

Pour disposer des blocs les uns à coté des autres, il faut utiliser la propriété float.

[html]
<div class="container">
<div class="column-1">– 1 –</div>
<div class="column-2">– 2 –</div>
<div class="column-3">– 3 –</div>
</div>
[/html]

Mais pour effectuer un retour à la ligne pour les éléments suivants, deux solutions existes :

La première consiste à créer un élément qui se positionnera en dessous des éléments floattant (ici après la fermeture du div.container):

[html]
<br style="clear:both" />
[/html]

La seconde consiste à utiliser la pseudo-classe :after

[css]
.container:after {
content:"\0020";
display:block;
height:0;
clear:both;
visibility:hidden;
overflow:hidden;
}
[/css]

Personnaliser les liens :

Il est possible de « customizer » les liens non seulement au survol de celui-ci à l’aide de :hover mais égelement selon qu’il ait été visité ou non avec :visited.
De plus ces propriétés peuvent s’accumuler.

[css]
a:link {color:red;}
a:visited {color:green;}
a:link:hover {color:blue;}
a:visited:hover {color:grey;}
[/css]

Personnaliser vos blockquotes :

Les pseudo-classes peuvent de plus faciliter la personnalisation de certains éléments. Par exemple, les blocs de citation (blockquote)

[html]
<blockquote>
<p>Ici, la 1ere ligne de votre citation.</p>
<p>Là, la seconde.</p>
</blockquote>
[/html]

L’idée est de mettre en fond de la balise blockquote la première image de l’ouverture du bloc de citation, et sur le dernier paragraphe, l’image de fermeture.
Pour personnaliser ce bloc, il est possible d’utiliser :first-child et :last-child pour controler le premier et dernier paragraphe. Les propriétés text-indent et padding-right servant à restreindre la zone de texte.

[css]
blockquote {
background:url(images/blockquote-open.gif) top left no-repeat;
}
blockquote p:first-child {
text-indent:30px;
}
blockquote p:last-child {
background:url(images/blockquote-close.gif) bottom right no-repeat;
padding-right:30px;
}
[/css]