CSS : Les feuilles de style

1 Introduction

Lors de l'élaboration d'une feuille de style, il est parfois utile de n'appliquer un style qu'à un seul petit élément (ex. : la première ligne d'un paragraphe) ou à un élément ayant un certain comportement ; ex. : un lien survolé). Or, les sélecteurs courants, comme « body », « p » ou « h1 », ne permettent pas d'affecter un style aussi précisément. Il existe en fait d'autres types de sélecteurs, appelés pseudo-formats ou pseudo-classes, qui permettent d'affiner le style appliqué.

2 La syntaxe

Le nom d'une pseudo-classe s'écrit toujours de la façon suivante : d'abord le nom de la balise HTML concernée, suivi d'un double-point et, enfin, la mention du comportement ou de la position. Par exemple :

• a:visited (pour appliquer un style particulier aux liens visités) ;
• a:hover (pour appliquer un style particulier aux liens survolés) ;
• p:first-letter (pour appliquer un style particulier à la première lettre du paragraphe).

Notez bien que vous ne pouvez pas modifier ces noms, ce sont des mots-clés prédéfinis du format CSS. Il n'est pas possible de créer ses propres pseudo-classes.

3 Les pseudo-classes pour les liens

Les pseudo-classes suivantes ne s'appliquent, vous vous en doutez, qu'à la balise <a>. Elles sont au nombre de cinq :

•  :link, permet d'appliquer un style aux liens qui n'ont pas encore été visités ;
•  :visited, permet d'appliquer un style aux liens qui ont déjà été visités ;
•  :hover, permet d'appliquer un style aux liens « survolés » par la souris ;
•  :active, permet d'appliquer un style aux liens qui sont en train d'être cliqués (le style est appliqué tant que le doigt reste appuyé et cesse lorsque le bouton est relâché) ;
•  :focus, permet d'appliquer un style à un lien lorsqu'il est la cible du focus (par exemple, la navigation de lien en lien via la touche [tabulation] implique que chaque lien est successivement la cible du focus).

Notez que pour une interprétation correcte des pseudo-formats, pour éviter les erreurs d'héritage, vous devez les déclarer dans cet ordre : :link, :visited, :hover, :active. Sachez que les pseudo-classes :hover, :active et :focus sont appelées « pseudo-classes dynamiques », car elles permettent de modifier le style d'une balise en fonction d'un événement, souvent une intervention de l'utilisateur. Elles peuvent tout à fait être appliquées à d'autres balises que les liens : titres, paragraphes, etc. Attention cependant, les anciens navigateurs n'interprètent pas toutes ces pseudo-classes, notamment :hover, :active et :focus, qui sont des implémentations de CSS 2.

4 Les pseudo-classes pour les textes

Les pseudo-classes de texte permettent d'appliquer un style à une portion de texte bien délimitée. Ainsi les pseudo-classes de texte s'utilisent généralement avec la balise de paragraphe <p>.
On retiendra deux principales pseudo-classes de texte :

•  :first-line, qui permet d'appliquer un style à la première ligne du paragraphe ;
•  :first-letter, qui permet d'appliquer un style à la première lettre du paragraphe (utilisé dans le cas des lettrines, voir le tutoriel précédent).

Vous pouvez également choisir d'insérer un contenu (texte statique ou contenu variable) avant ou après un élément, à l'aide des pseudo-classes :before et :after. Le contenu à insérer est alors précisé avec la propriété content. Le texte statique à insérer doit être placé entre guillemets, comme suit :

h1:before {
content: "coucou!";
}

La règle précédente a pour effet d'inscrire le mot « coucou! » juste devant le titre de niveau 1. Il est également possible d'insérer une image, dans ce cas, content: doit être suivi de la mention url(nom_image.png). Attention, ces deux pseudo-classes, implémentations de CSS2, ne sont pas encore interprétées par Internet Explorer.

5 La pseudo-classe descendante

Une pseudo-classe « descendante » permet d'appliquer un style à la première balise contenue dans une paire de balises parente. La syntaxe de cette pseudo-classe est la suivante :

balise_parent > première_balise:first-child { déclarations des propriétés }

Prenons l'exemple ci-dessous :

#header1 > p:first-child {
color: red;
}

Et considérons la portion de code HTML correspondante :

<div id="header1">
<p>Mon texte ici</p>
</div>

Le texte contenu entre les balises

...

va bel et bien être écrit en rouge, comme précisé dans la feuille de style. En revanche, si vous ajoutez une image, comme ceci :

<div id="header1">
<img src="nom_image.png" id="logo" alt="logo du produit" />
<p>Mon texte ici </p>
</div>

Et bien cela ne marchera plus car <p> n'est plus la première balise rencontrée au sein du div header1. Notons que Internet Explorer n'interprète pas encore la pseudo-classe :first-child.

6 Les pseudo-classes de page

C'est le sélecteur @page qui permet de définir les paramètres de mise en page pour l'impression (dimensions, marges, etc.). Il existe en l'occurrence des pseudo-classes qui permettent de définir un style spécifique pour les pages de droite, de gauche ou pour la première page d'un document. Ainsi :

• @page:first, permet de définir le style de la première page d'un document ;
• @page:left, permet de définir le style des pages de gauche ;
• @page:right, permet de définir le style des pages de droite.

7 Ressources

http://www.unixgarden.com/index.php/web/les-pseudo-classes-en-css
Proposer plusieurs CSS en fonction du navigateur
Un menu haut en couleurs