CSS - Pseudo-classes

Qu'est-ce qu'une pseudo-classe ?

Salut à toi, futur(e) magicien(ne) du CSS ! Aujourd'hui, on plonge dans le monde magique des pseudo-classes CSS. Ne te laisse pas effrayer par le terme pompeux - je te promets que ce n'est pas aussi compliqué que ça en a l'air. En fait, une fois que tu auras compris, tu utiliseras les pseudo-classes comme un pro en un rien de temps !

Alors, c'est quoi exactement une pseudo-classe ? Imagine que tu as un superpouvoir qui te permet de styliser des éléments sur ta page web en fonction de leur état ou de leur condition. C'est essentiellement ce que font les pseudo-classes ! Elles te permettent d'appliquer des styles à des éléments en fonction de choses comme le fait que l'utilisateur les survole, qu'ils sont le premier enfant dans une liste, ou même dans quelle langue la page est écrite.

Syntaxe

Avant de nous plonger dans des pseudo-classes spécifiques, voyons rapidement la syntaxe. C'est en fait assez simple :

selecteur:pseudo-classe {
propriété: valeur;
}

Voyez ce deux-points (:) après le sélecteur ? C'est comme ça que tu sais que tu traites avec une pseudo-classe. Facile, non ?

Pseudo-classe Hover

Commençons par une des pseudo-classes les plus courantes et amusantes : :hover. Cette petite perle te permet de changer le style d'un élément lorsque l'utilisateur fait défiler sa souris dessus. C'est comme de la magie !

<button class="my-button">Survole-moi !</button>

.my-button {
background-color: bleu;
color: blanc;
padding: 10px 20px;
border: none;
cursor: pointer;
}

.my-button:hover {
background-color: bleu clair;
color: noir;
}

Dans cet exemple, notre bouton est bleu avec du texte blanc au départ. Mais lorsque tu le survoles - poof ! - il change en bleu clair avec du texte noir. Essaye-le et vois la magie se produire !

Pseudo-classe Active

La prochaine est la pseudo-classe :active. Celle-ci est déclenchée lorsque un élément est activé par l'utilisateur, comme lorsque qu'il clique sur un bouton.

<button class="my-button">Clique-moi !</button>

.my-button {
background-color: bleu;
color: blanc;
padding: 10px 20px;
border: none;
cursor: pointer;
}

.my-button:active {
background-color: bleu foncé;
transform: scale(0.95);
}

Maintenant, lorsque tu clique et tiens le bouton, il deviendra bleu foncé et se réduira légèrement. C'est comme si le bouton disait, "Hey, je suis cliqué !"

Pseudo-classe Focus

La pseudo-classe :focus est particulièrement utile pour améliorer l'accessibilité. Elle est appliquée lorsque un élément reçoit le focus, ce qui peut se produire lorsque l'utilisateur clique sur un champ d'entrée ou le selectionne avec le tabulateur.

<input type="text" class="my-input" placeholder="Tape quelque chose...">

.my-input {
border: 2px solid #ccc;
padding: 5px;
}

.my-input:focus {
border-color: bleu;
outline: none;
box-shadow: 0 0 5px rgba(0, 0, 255, 0.5);
}

Avec ce CSS, lorsque le champ d'entrée est focusé, il reçoit une bordure bleue et un léger éclat bleu. C'est une excellente façon de guider tes utilisateurs à travers les formulaires !

Pseudo-classe nth Child

Maintenant, rendons les choses un peu plus sophistiquées avec la pseudo-classe :nth-child(). Celle-ci te permet de sélectionner des éléments en fonction de leur position dans un groupe de frères et sœurs.

<ul class="my-list">
<li>Premier élément</li>
<li>Deuxième élément</li>
<li>Troisième élément</li>
<li>Quatrième élément</li>
<li>Cinquième élément</li>
</ul>

.my-list li:nth-child(odd) {
background-color: #f2f2f2;
}

.my-list li:nth-child(3n) {
color: bleu;
}

Dans cet exemple, nous stylisons chaque élément impair avec un arrière-plan gris clair, et chaque troisième élément avec du texte bleu. C'est comme créer un motif dans ta liste !

Pseudo-classe First-Child

La pseudo-classe :first-child sélectionne le premier élément parmi un groupe de frères et sœurs. C'est génial pour donner un traitement spécial au premier élément dans une liste ou au premier paragraphe dans un article.

<div class="container">
<p>Je suis le premier paragraphe !</p>
<p>Je suis juste un paragraphe ordinaire.</p>
<p>Moi aussi !</p>
</div>

.container p:first-child {
font-weight: gras;
color: bleu;
}

Maintenant, le premier paragraphe se distingue du reste. C'est comme donner un passe VIP à ton premier élément !

Pseudo-classe Last-Child

Comme tu pourrais le deviner, :last-child est l'opposé de :first-child. Il sélectionne le dernier élément parmi un groupe de frères et sœurs.

<ul class="my-list">
<li>Premier élément</li>
<li>Deuxième élément</li>
<li>Troisième élément</li>
<li>Dernier élément !</li>
</ul>

.my-list li:last-child {
font-style: italic;
color: vert;
}

Avec ce CSS, le dernier élément de la liste reçoit un traitement spécial en italique et en vert. C'est une excellente façon de conclure !

Pseudo-classe Lang

La pseudo-classe :lang est un peu plus spécialisée. Elle te permet de sélectionner des éléments en fonction de la langue du document ou de l'élément.

<p lang="en">Hello, World!</p>
<p lang="fr">Bonjour, le Monde!</p>
<p lang="es">¡Hola, Mundo!</p>

p:lang(en) {
color: bleu;
}

p:lang(fr) {
color: rouge;
}

p:lang(es) {
color: vert;
}

Ce CSS coloriera chaque salutation en fonction de sa langue. C'est comme créer un code couleur multilingue pour ton site web !

Pseudo-classe Not

Pour finir, regardons la pseudo-classe :not(). Celle-ci est un peu différente - elle sélectionne des éléments qui NE correspondent PAS au sélecteur que tu spécifies.

<div class="container">
<p>Je suis un paragraphe.</p>
<p class="special">Je suis un paragraphe spécial !</p>
<p>Je suis un autre paragraphe.</p>
</div>

.container p:not(.special) {
color: gris;
}

Dans ce cas, tous les paragraphes sauf celui avec la classe "special" seront coloriés en gris. C'est comme dire, "Stylise tout sauf cette chose-là !"

Liste des pseudo-classes CSS

Il y a beaucoup plus de pseudo-classes disponibles dans le CSS. Voici un tableau de quelques-unes des plus courantes :

Pseudo-Class	Description
:hover	Sélectionne un élément lorsque la souris le survole
:active	Sélectionne un élément lorsqu'il est activé
:focus	Sélectionne un élément lorsqu'il a le focus
:nth-child()	Sélectionne des éléments en fonction de leur position dans un groupe de frères et sœurs
:first-child	Sélectionne le premier enfant
:last-child	Sélectionne le dernier enfant
:lang()	Sélectionne des éléments en fonction de la langue
:not()	Sélectionne des éléments qui ne correspondent pas à un sélecteur
:link	Sélectionne les liens non visités
:visited	Sélectionne les liens visités
:checked	Sélectionne les éléments d'entrée cochés
:disabled	Sélectionne les éléments désactivés
:empty	Sélectionne les éléments qui n'ont pas d'enfants

Et voilà, les amis ! Nous avons parcouru le monde des pseudo-classes CSS, des bases aux techniques plus avancées. Souviens-toi, la clé pour maîtriser celles-ci est la pratique. Alors vas-y, joue avec ces pseudo-classes dans tes propres projets. Avant de t'en rendre compte, tu seras créer des sites web dynamiques et interactifs qui répondent à toutes sortes d'actions utilisateur. Bon codage !

Credits: Image by storyset