Des pseudo-classes pour d’authentiques effets [Article Invité]

Des pseudo-classes pour d’authentiques effets [Article Invité]

J’acceuille aujourd’hui Florian du blog « business-xperience« , sur lequel il partage des connaissances sur la création de business sur internet, le blogging et le webmarketing. Il vient vous expliquer une méthode facile pour faire de beaux effets sur votre site, en deux coups de cuillères à CSS.

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">&nbsp;</div>
<p><input type="text" /></p>

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); 
}
Note : si vous êtes un peu perdus avec les notations de couleurs, des révisions s’imposent

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">
	<p>Ceci est le premier paragraphe du bloc.</p>
	<p>Ceci est le deuxième paragraphe du bloc.</p>
	<p>Ceci est un autre paragraphe du bloc.</p>
	<p>Ceci est le dernier paragraphe du bloc.</p>
</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.

En cadeau, j’ai regroupé sur une page tous les exemples avec en bonus: un exemple un peu plus complexe pour mieux comprendre l’intérêt des pseudo-classes structurelles.

CSS, tutoriel

A propos de MarieEve Louvel

Depuis 3 ans, je partage mes connaissances sur ce blog, pour les entrepreneurs désireux de créer leur site vitrine et/ou leur blog professionnel avec WordPress. Mon expérience professionnelle va de l'accompagnement à la formation, en passant par de la création de site ou de logiciel. Retrouvez mes cours en ligne sur mon site FeelWeb Formation [http://feelwebformation.com]

13 commentaires

  1. C’est devenu complexe pour créer un site internet, qu’est ce que je regrette mon bon vieux adobe golive cyberstudio ( je dois devenir vieux jeu :) ) !

    Répondre
    • Je ne sais même pas ce que c’est :/
      MDR

      Répondre
  2. C’est vraiment très bien expliqué et très clair, avec les exemples tout ça =) Bravo!
    Après j’ai peut être un peu plus de mal à situer l »utilité tout ça dans le contexte réel, surtout pour la dernière pseudo-classe en fait.

    Répondre
    • Bonjour Dominique,
      Typiquement, la dernière est utilisée sur les menus: par exemple, un menu horizontal, c’est une liste d’élément « li » (un li = un bouton du menu), on veut mettre une marge à droite (margin-right) de chaque bouton SAUF le dernier. On va donc utiliser cette pseudo classes pour remettre le margin-right du dernier élément à 0.

      Répondre
    • Exactement comme l’as dis Marie-Eve.

      D’ailleurs, regarde la page d’exemple.
      Dans le dernier exemple, j’ai mis un menu utilisant first-child et last-child 😉

      Répondre
  3. Merci pour cette information Marie Eve, le CSS a été à mes débuts un gros problème, mais plus je lis de blog comme le tien et plus ma lanterne s’illumine :)

    Benjamin

    Répondre
  4. Je ne me suis pas vraiment penché sur les nouveautés du CSS3 (faudrait que je m’y mette !) mais je trouve pas mal l’idée des pseudo-classes structurelles.

    Ainsi lors de la publication d’un article on peut tout à fait envisager de mettre automatiquement en italique l’intro et la conclusion qui sont en général le premier en dernier paragraphe (sur la plupart de mes sites en tout cas :) )

    Répondre
    • Salut Xavier,

      en fait, il y a que last-child qui fait partie de CSS3.
      Je n’ai pas parlé des autres comme nth-child ou son penchant nth-last-child

      Si tu le cerveau bien accroché, tu peux aller voir la doc W3C : http://www.w3.org/TR/css3-selectors/#pseudo-classes

      Sinon, pour ton exemple. Oui , tu peux tout à fait le faire avec last-child et first-child sur ton bloc conteneur :)

      Répondre
  5. Merci pour ce tutoriel plutôt complet ! Je ne connaissais pas ces pseudo-classes. Je me suis limité aux simples classes. Ca suffit pour éditer un petit thème WordPress. Mais les pseudo-classes semblent ouvrir vers de nouveaux horizons.

    Répondre
  6. Super article MarieEve
    merci aussi car j’ai compris bien comment faire des pseudo-classes.

    Répondre
  7. Super article merci beaucoup
    j’ai enfin compris comment et quoi un pseudo …

    Répondre

Soumettre un commentaire

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

This Blog will give regular Commentators DoFollow Status. Implemented from IT Blögg

EmailEmail
PrintPrint