10. Sélecteurs de pseudo-classes
 |
| Sélecteurs de pseudo-classes - SAGProfProg - HTML CSS - Programmation, Développement web, Développement d'application, Génie Logiciel, Langage de programmation, Application web, Tutos, Informatique, Système d'information, Administration d'application |
Les pseudo-classes sont l'un des points forts des CSS : elles permettent de modifier dynamiquement l'apparence des éléments de votre site web.
En d'autres termes, vous pouvez modifier la forme de vos éléments et ajouter des effets dynamiques à vos pages même après leur chargement par le navigateur.
Nous n'allons pas apprendre de nouvelles propriétés CSS dans ce chapitre. Vous en connaissez déjà pas mal maintenant.
Nous verrons plutôt comment les appliquer à des moments ou des lieux précis. Par exemple, nous apprendrons comment modifier l'apparence d'un lien hypertexte lorsque le visiteur passe sa souris dessus ou lorsqu'il est cliqué par l'utilisateur.
Tous ces éléments vous permettent d'ajouter encore plus de dynamisme à votre site web.
C'est à cela que servent les sélecteurs de pseudo-classes.
Qu'est-ce qu'une pseudo-classe
Puisque nous parlerons de pseudo-classes dans ce chapitre, il est logique de définir ce qu'elles sont avant d'aborder des exemples plus concrets de leur fonctionnement.
<capturer>
Les pseudo-classes ou sélecteurs de pseudo-classe sont des mots clés ajoutés aux sélecteurs CSS afin de spécifier un état spécial de l'élément sélectionné.
En tant que petite révision avant d'entrer dans quelque chose de nouveau, voici comment fonctionnent les sélecteurs CSS.
selector
{
property: value;
}
Les pseudo-classes permettent d'appliquer un style à un élément en fonction de facteurs externes comme l'historique du navigateur, l'état de son contenu ou la position de la souris.
Pour utiliser une pseudo-classe, vous ajoutez simplement deux points (:) au sélecteur, suivi du nom de la pseudo-classe.
selector:pseudo-class
{
property: value;
}
Vous pouvez appliquer des pseudo-classes à n'importe quel type de sélecteur que nous avons découvert dans le chapitre Paramétrer CSS : noms de balises, classes ou identifiants.
tag:pseudo-class { } /* Sélecteur de nom de balise */
.class:pseudo-class { } /* Sélecteur de classe */
#id:pseudo-class { } /* Sélecteur d'ID */
Vous pouvez également sélectionner des éléments dans l'élément affecté par la pseudo-classe.
div:pseudo-class a { property: value; }
Nous entrerons plus en détail lorsque nous en apprendrons davantage sur chaque sélecteur de pseudo-classe individuel.
En vol stationnaire
Comme vous l'avez peut-être deviné, le mot-clé :pseudo-class que nous avons utilisé jusqu'à présent dans nos exemples n'est pas un véritable sélecteur de pseudo-classe.
Les vraies pseudo-classes ont une fonction réelle.
La première que nous allons découvrir est de loin la plus courante, la pseudo-classe :hover.
Il est très souvent utilisé sur les hyperliens mais peut autrement être appliqué à n'importe quel élément HTML ou sélecteur CSS de votre choix.
La syntaxe est exactement la même que celle que nous avons vue dans nos exemples.
a:hover
{
color: red;
}
La pseudo-classe :hover affecte tout élément déterminé par le sélecteur et ajoute la condition d'un survol de la souris.
Dans notre exemple, les hyperliens seront affichés en rouge lorsque l'utilisateur déplacera son pointeur sur le lien (et reviendront à la valeur par défaut lorsque le pointeur ne sera plus sur le lien).
Gardez à l'esprit que ces attributs prévaudront sur tout style CSS standard.
Voici un exemple.
a
{
text-decoration: none;
color: blue;
}
a:hover
{
text-decoration: underline;
color: red;
}
Et le résultat.
<capturer>
La couleur du lien change au passage de la souris et un soulignement est ajouté.
Avec un peu d'imagination, vous pouvez ajouter n'importe quel effet que vous voulez avec cette pseudo-classe.
Vous vous souvenez quand j'ai dit que vous pouviez également sélectionner des éléments contenus dans l'élément affecté par la pseudo-classe ?
Essayons avec :hover, voir ci-dessous pour le code HTML.
<ul>
<li>Connaissez-vous
<a href="http://www.sagprofprog.com">SAGProfProg</a> ?
C'est le <strong>meilleur site</strong> sur le Web.</li>
<li>Connaissez-vous également
<a href="http://www.sagprofprog.com">SAGProfProg</a> ?
C'est le deuxième <strong>meilleur site</strong> sur le Web.</li>
<li>Et n'oubliez pas
<a href="http://www.sagprofprog.com">SAGProfProg</a>. Il fait partie des cinq meilleurs <strong>meilleurs sites</strong> de tous les temps.</li>
</ul>
Et le CSS associé.
li:hover strong
{
color: red;
font-style: italic;
}
Vous pouvez voir le résultat dans la figure suivante.
<capturer>
Cela fonctionne exactement comme les premiers exemples, à l'exception que l'emphase <strong> est mise en surbrillance quel que soit l'endroit où vous pointez votre souris tant qu'elle est sur la même ligne horizontale que la puce <li>.
Le code CSS signifie littéralement "chaque fois que l'utilisateur pointe sa souris à l'intérieur d'une balise <li>, n'ajoute que le style suivant à l'élément <strong>".
Je vous suggère de jouer avec cette pseudo-classe et de devenir intuitif avec les différentes façons dont elle peut ajouter du dynamisme à vos pages Web.
Cliquer, sélectionner et visiter
Nous venons de découvrir la pseudo-classe :hover qui permet de changer dynamiquement le style d'un élément lorsque l'utilisateur passe le pointeur de sa souris dessus.
Mais CSS vous permet d'interagir encore plus finement avec les différents états de vos éléments.
Lorsque cliqué
Le pseudo-format :active permet d'appliquer un style particulier à un élément lorsqu'il est cliqué par l'utilisateur.
En pratique, il est surtout utilisé sur les hyperliens.
Cet effet n'est activé que lorsque l'utilisateur clique sur l'élément afin que la nouvelle apparence ne soit pas visible très longtemps.
Par exemple, vous pouvez changer la couleur de vos liens (ou paragraphes ou titres).
a:active { color: red; }
Cela rendra vos liens rouges uniquement lorsqu'ils seront cliqués par l'utilisateur.
Lorsqu'il est concentré
La pseudo-classe :focus applique un style lorsque l'élément est sélectionné.
Ceci est légèrement différent de :active car il affecte tout élément qui a obtenu le focus.
Essayons-le sur les hyperliens.
a:focus { color: red; }
La meilleure façon de voir cet effet est de continuer à appuyer sur Tab jusqu'à ce que l'un des liens concernés acquière le focus.
Cette pseudo-classe fonctionne mieux sur quelques balises HTML que nous n'avons pas encore vues, telles que les éléments de formulaire. Ne vous inquiétez pas, nous les couvrirons assez tôt dans ce tutoriel.
Lors de la visite
Vous pouvez attribuer un style spécifique à un lien pointant vers une page déjà consultée par l'utilisateur.
Par défaut et lorsqu'aucun style n'est défini, le navigateur colore automatiquement les liens visités en violet.
Rendons-le rouge à la place.
a:visited { color: red; }
Mis à part les moteurs de recherche comme Google et Bing, la plupart des sites Web n'utilisent pas cette fonctionnalité car cela devient déroutant pour l'utilisateur.
Si vous ne voulez pas que les liens visités se distinguent des liens non visités, il vous suffit de définir un style pour les liens "standard".
Tant que vous fournissez un style pour les liens "standard" via le sélecteur a, les liens visités hériteront automatiquement des propriétés associées à moins qu'ils ne soient écrasés par la pseudo-classe :visited.
Plus à ce sujet ci-dessous.
Lorsqu'il n'est pas visité
Si vous voulez que votre style n'affecte que les liens non visités, vous pouvez utiliser la pseudo-classe :link.
Les propriétés définies ne seront pas héritées par :visited.
a:link { color: red; }
a:visited { color: red; }
Le code ci-dessus est équivalent à celui ci-dessous.
a { color: red ; }
Cette pseudo-classe a aussi une spécificité : elle ne s'applique qu'aux hyperliens.
Si vous vous souvenez de notre chapitre sur la création de liens, nous avons introduit la balise <a> comme élément d'ancrage.
Il ne devient un lien hypertexte que si un attribut href est spécifié.
Avant et après
Les pseudo-formats que nous allons voir maintenant sont très intéressants et sont un peu différents de ce que nous avons l'habitude de faire en CSS.
Imaginez que vous ayez une page web sous la forme d'un Q&A (Questions et Réponses).
Notre code HTML ressemblerait à ceci.
<p class="question">Qu'est-ce que SAGProfProg</p>
<p>Le meilleur site du Web.</p>
[...]
<p class="question">Pourquoi SAGProfProgest-il si génial</p>
<p>Je ne sais pas.</p>
Le nombre de questions et de réponses peut se situer entre 10 et 30.
Supposons maintenant que je sois un webmaster paresseux (croyez-moi, il y a beaucoup de webmasters paresseux) et que je souhaite ajouter le texte "Question : ..." avant chaque question, juste pour le rendre plus lisible.
De plus, je suis un noob de la ponctuation et j'ai oublié les points d'interrogation, nous devrons donc également les ajouter à la fin.
On pourrait bien sûr éditer manuellement les questions pour ajouter ce qu'on veut directement dans le code HTML.
Mais puisque nous sommes paresseux, regardons plutôt comment automatiser cette insertion.
Pseudo-éléments CSS
Pour cela nous allons utiliser les deux pseudo-éléments suivants, ::before et ::after.
Pseudo-éléments ? Je croyais qu'on parlait de pseudo-classes ?
Ils sont, à toutes fins utiles, exactement les mêmes.
Avant CSS3, il n'y avait en fait aucune distinction entre l'un et l'autre.
En bref, les pseudo-classes agissent comme des moyens de définir les états spéciaux d'un élément, tandis que les pseudo-éléments créent de nouveaux éléments virtuels.
<capturer>
Vous remarquerez que les pseudo-éléments sont précédés de deux deux-points :: plutôt que d'un :. Il s'agit d'une nouvelle convention CSS3 pour différencier les deux.
En dehors de cela, les pseudo-éléments fonctionnent exactement de la même manière que les pseudo-classes.
.question::before{ }
.question::after { }
Le code ci-dessus montre comment définir les deux pseudo-éléments que nous allons utiliser.
Mais tout est vide ! Vous n'avez même pas ajouté de propriétés !
C'est parce que nous allons utiliser une propriété CSS spéciale : content.
Il s'utilise presque exclusivement avec les pseudo-éléments ::before et ::after et permet de générer du contenu dans les éléments virtuels, soit sous forme de texte, soit via une ressource.
Voici un exemple de la façon dont il peut être utilisé.
.question::before { content : "Question : " ; }
.question::after { content : "?" ; }
Cette propriété va insérer du contenu dans la page HTML sans qu'il soit dans le DOM (Document Object Model).
C'est assez différent de ce que nous avons vu jusqu'à présent et c'est un peu une exception en CSS.
Vous n'êtes pas non plus limité à utiliser uniquement le contenu avec les pseudo-éléments ::before et ::after .
Revenons à notre exemple.
.question
{
color: blue;
font-style: italic;
}
.question::before
{
content: "Question: ";
font-weight: bold;
text-decoration: underline;
}
.question::after { content : "?" ; }
Le résultat est illustré ci-dessous.
<capturer>
Il est également possible d'ajouter une image à la place du texte avec les pseudo-éléments ::before et ::after.
On utilise toujours la propriété content mais cette fois pour indiquer le chemin vers l'image avec la fonction url.
.question::before { content : url("question.png"); }
Essayons.
<capturer>
Gardez à l'esprit que ce ne sont que des exemples, et vous pouvez utiliser à la fois des pseudo-classes et des pseudo-éléments pour décorer votre site comme vous le souhaitez.
Aucun commentaire