Des pseudo-classes pour d’authentiques effets

Partagez si vous aimez ->

Dans cet article, nous parlerons des pseudo-classes en CSS. Vous allez voir, c’est quelque chose de très sympa.

Cela vous permettra de mettre un peu de dynamisme sur votre site. Par exemple, vous pouvez changer la couleur d’un formulaire en fonction des actions de l’internaute. Sympa, non ?

Qu’est-ce que c’est ?

Les pseudo-classes permettent de modifier le style appliqué à des balises HTML par rapport à sa position relative ou en réaction à un événement.

Ce n’est toujours pas clair ?

Pas de panique ! On va apprendre en pratiquant sur des exemples.

La syntaxe

Les pseudo-classes s’utilisent après un sélecteur selon le format suivant : sélecteur:pseudo-classe

Les différents sélecteurs

Le sélecteur peut-être soit une balise seule (exemple : p, div, a), soit une classe (exemple : div.warning, .fleft) ou bien un identifiant (div#header, #footer).

Les différentes pseudo-classes

Il existe un nombre limité de pseudo-classes et il est impossible d’en créer de nouvelles.

De nombreuses ont été ajoutés avec CSS3. Dans cet article, je me contenterais des plus anciennes, qui ont l’avantage d’être compatibles avec tous les navigateurs.

On peut les classer en 4 catégories :

  • Les pseudo-classes de lien
  • Les pseudo-classes dynamiques
  • Les pseudo-classes structurelles
  • Les autres…

Je ne parlerais pas de la dernière catégorie. Les plus intéressantes étant les dynamiques, commençons par cette catégorie :

Les pseudo-classes dynamiques

Sur un site web, un internaute réalise plusieurs actions par exemple :

  • Le clic sur un bouton
  • Le survol avec la souris d’un élément (un menu, un lien, …)
  • La sélection d’un champ de formulaire

Ses différentes actions sont des événements.

Les pseudo-classes dynamiques permettent d’affiner le style d’un élément en fonction de ses événements.

Elles sont au nombre de trois, correspondant chacune à l’un des événements décrits ci-dessus :

  • :active, pour appliquer un style sur un clic
  • :hover, pour appliquer un style sur un survol
  • :focus, pour appliquer un style sur une sélection

Un exemple

Assez de théorie, place à la pratique :

Les 3 évènements en action grâce aux pseudo-classes

Et voici le code HTML tout simple :

<div class="conteneur"></div>
<input type="text" />

Là où la magie opère, c’est dans le code CSS :

.conteneur {
width: 100px;
height: 100px;
border: 1px solid #000;
}
.conteneur:hover {
background-color: #F00;
}
.conteneur:active{
background-color: #00F;
}
input[type=text]:focus {
background-color: #DFFFD9;
border-color: rgb(188, 35, 80);
}

C’est simple ? Non ?

Tous d’abord, nous avons un style pour notre boite .conteneur . Ici, c’était surtout pour bien la voir en lui imposant une dimension et une bordure.

  • .conteneur :hover pour changer la couleur de fond en rouge du conteneur au survol de celui-ci avec la souris.
  • .conteneur :active pour changer la couleur de fond en bleu du conteneur quand on clique dessus.
  • input[type=text]:focus pour changer la couleur de fond et de bordures de tous les champs texte (Textbox) de la page quand ils sont sélectionnés.

Petite astuce avec Firebug

Vous pouvez très facilement faire apparaitre chacun des états comme suit :

Voir les pseudo-classes avec Firebug

Les pseudo-classes de lien

Il existe deux pseudo-classes pour les liens. Mais ils sont de moins en moins utilisés de nos jours.

Ce sont :

  • a :link, pour cibler les liens qui n’ont pas été visités
  • a :visited, pour cibler les liens qui ont été visités

Je n’aime pas trop l’idée de changer le style d’un lien en fonction de sa visite ou non donc je ne les utilise pas.

Pour mettre un style aux liens, je préfère utiliser le couple :

a { /* style générique pour tous les liens */ }
a:hover { /* quand on passe la souris au-dessus d’un lien */ }

Les pseudo-classes structurelles

Nous terminerons par les pseudo-classes structurelles. Les plus difficiles à appréhender.

Il en existe toute une panoplie (surtout avec CSS3), je vous montre les deux plus simples (et les plus utilisés aussi).

Les pseudo-classes structurelles permettent de mettre un style sur un sélecteur par rapport à sa position relative à un autre sélecteur.

Absolument rien compris !

Pas de panique, un bon exemple et tout sera plus clair.

Voici le code HTML que nous allons utiliser :

<div class="structurel">

Ceci est le premier paragraphe du bloc.

Ceci est le deuxième paragraphe du bloc.

Ceci est un autre paragraphe du bloc.

Ceci est le dernier paragraphe du bloc.

</div>

Et le rendu que nous aurons :

Les pseudo-classes structurelles

Eh, mais le 1er paragraphe est en gras et le dernier en italique! Comment est-ce possible ?

C’est là qu’opère la magie des deux pseudo-classes : first-child et last-child.

Regardons le code CSS pour comprendre :

div.structurel p:first-child { font-weight: bold; }
div.structurel p:last-child { font-style: italic; }

Concrètement, first-child permet de cibler le premier élément. Last-child, c’est pour cibler le dernier élément.

Notre élément ici est la balise p.

La chose importante à comprendre ici est de délimiter la position à l’aide d’un sélecteur parent. C’est le rôle de div.structurel placé avant la pseudo-classe.

Ainsi, à l’intérieur du bloc structurel qui contient plusieurs paragraphes, on peut compter leurs positions et leur appliquer un style.

En conclusion

Dans cet article, vous avez pu découvrir le merveilleux monde des pseudo-classes.

Vous savez maintenant ce qu’elles représentent et savez en utiliser plusieurs.

J’espère que vous avez vu l’intérêt d’utiliser les pseudo-classes. Reste plus pour vous qu’à pratiquer en les utilisant.

 

Partagez si vous aimez ->

Youcef

Concepteur de Sites Web et entrepreneur, l'écriture et la pédagogie font aussi partie de mes passions. Mon objectif est de vous aider à trouver la solution idéale pour créer votre propre Site Internet.

Vous aimerez aussi...

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Simple Share Buttons