LES PSEUDO-CLASSES EN

CSS
OBJECTIFS :
* Connaitre les pseudos classes en CSS
* Etre capable d’utiliser les pseudos classes en CSS
DEFINITION :
Une pseudo-classe est un mot clé préfixé par deux points (:) qui
s’ajoute à un sélecteur CSS pour appliquer un style à un élément dans
un cas particulier.

OBJECTIF :
L'objectif des pseudo-classes en CSS est de permettre aux
développeurs web d'appliquer des styles à des éléments HTML en
fonction de leur état ou de leur contenu. Les pseudos-classes sont
un outil utile pour créer des styles plus précis et personnalisés pour
un site web en ciblant des éléments spécifiques .
SYNTAXE D’UNE PSEUDO CLASSE :

Une pseudo classe en CSS commence par deux points( :) symbole.

sélecteur :pseudo-classe {
/* Styles CSS */
}
LISTE DES PSEUDO-CLASSES
STANDARDS :
• 1. :hover - appliquée lorsqu'un élément est survolé avec la souris.
• 2. :active - appliquée lorsque l'utilisateur clique sur un élément.
• 3. :focus - appliquée lorsqu'un élément est sélectionné avec le clavier ou la souris.
• 4. :visited - appliquée aux liens visités.
• 5. :first-child - appliquée au premier enfant d'un élément parent.
• 6. :last-child - appliquée au dernier enfant d'un élément parent.
• 7. :nth-child - permet de cibler un enfant spécifique d'un élément parent en utilisant une formule
mathématique.
• 8. :not - permet d'exclure des éléments spécifiques de la sélection.
• 9. :checked - appliquée aux éléments de formulaire qui ont été cochés ou sélectionnés.
• 10. :disabled - appliquée aux éléments de formulaire qui sont désactivés.
11. :empty - appliquée aux éléments qui n'ont pas de contenu.
12. :target - appliquée aux éléments qui sont ciblés par un lien interne (ancre).
13. :lang - permet de cibler les éléments qui ont un attribut "lang" spécifique.
14. :root - appliquée à l'élément racine (html) de la page.
15. :before - permet d'ajouter du contenu avant un élément.
16. :after - permet d'ajouter du contenu après un élément.
17. :only-child - appliquée aux éléments qui sont les seuls enfants d'un élément parent.
18. :nth-of-type - permet de cibler un élément spécifique d'un type donné en utilisant une
formule mathématique.
19. :nth-last-of-type - permet de cibler un élément spécifique d'un type donné en partant
de la fin en utilisant une formule mathématique.
20. :first-of-type - appliquée au premier élément d'un type donné dans un élément parent.
21. :last-of-type - appliquée au dernier élément d'un type donné dans un élément parent.
LES PSEUDO CLASSES LIENS :

Les pseudo-classes de liens en CSS3 sont des sélecteurs spéciaux

qui vous permettent de styler des liens hypertextes (<a>) dans
différentes étapes de leur cycle de vie.

Voici quelques-unes des pseudo-classes de liens les plus

couramment utilisées en CSS3 :
PSEUDO-CLASSE :Link
:Link
* Permet de définir le style d’un lien non visité
* Désigne un lien hypertexte dont la page cible (celle
spécifiée dans son attribut Href) n’a pas encore été visitée.
* Permet de sélectionner les liens à l’intérieur d’éléments.
* Il est destiné à aider les utilisateurs à faire la différence
entre les liens qu’ils ont et ceux qu’ils n’ont pas visités.
PSEUDO CLASSE :visited

*Permet de définir le style d’un lien une fois visité

*Permet d’assigner des propriétés CSS à une balise HTML a
dont le lien a déjà été visité et à ses fils.
*Il est destiné à aider les utilisateurs à faire la différence entre
les liens qu’ils ont et ceux qu’ils n’ont pas visités.
a:visited {
color : gray;
}
Exemple :
html
<a href="https://google.com">Cette page est visitée</a>
<br>
<a href="https://youtube.com">Essayez celle-ci peut-être ?</a>
Css
a{
color: blue;
}
a:visited {
color: red;
}
PSEUDO CLASSE :hover
*Permet de définir le style d’un lien au survol de la souris

PSEUDO CLASSE :active

*Permet de définir le style d’un lien lors d’un clic

PSEUDO CLASSE :focus

*Permet de définir le style d’un lien lors qu’un focus est actif : sélectionné à
l’aide du clavier ou activé avec la souris comme par exemple le champ d’un
formulaire.
Exemple :
Html
<h1>Je suis un H1</h1>
<p>Je suis un paragraph</p>
<input type="text">
<button>Clique moi!</button>

Css
h1:hover { background-color: gold;}

button: focus {background-color: brown;}

input: focus {background-color: green;}
button: active {font-size: 50px; background-color: Pink;
}
LES PSEUDO CLASSES POSITION :

Les pseudo-classes de position en CSS sont utilisées pour cibler des

éléments en fonction de leur position ou de leur relation avec d’autres
éléments dans la structure HTML.

Voici quelques-unes des pseudo-classes de position couramment

utilisées :
PSEUDO CLASSE :first-child
* Permet de définir le style du 1er élément enfant par rapport à son
parent
* Exemples :
- Supposons que nous avons déclaré le sélecteur suivant span:first-
child.
- Le navigateur appliquera le style associé à toutes les balises <span>
qui figurent en tant que premier élément enfant de n’importe quelle
balise.
- Si le code HTML était comme ceci:
<div>
<span>Bonjour</span>
à
<span>tous</span>
</div>
 Alors seule la premier balise <span> s’attribuerait le style décrit
dans le sélecteur
 HTML
- Soit le code HTML suivant:
<p>Ceci est le premier paragraphe.</p>
<p>Ceci est le deuxième paragraphe.</p>
<p>Ceci est le troisième paragraphe.</p>
<p><b>Remarque: </b>Notez que la pseudo-classe n'est
appliquée que sur le premier paragraphe.</p>
CSS
- On va pouvoir cibler le premier élément p qui est numéro 1 dans la page

p:first-child{
background: #05ffb0;
border: 1px solid;
padding: 5px;
RÉSULTAT:
 PSEUDO CLASSE :last-child
* :last-child permet de définir le style du dernier élément enfant par rapport à

son parent

* La pseudo classe CSS :last-child s’applique sur le dernier élément du type

donné.
* Exemple :
HTML
- Soit le code HTML suivant:
<p>Ceci est le premier paragraphe.</p>
<p>Ceci est le deuxième paragraphe.</p>
<p>Ceci est le troisième paragraphe.</p>
<p><b>Remarque: </b>Notez que la pseudo-classe n'est appliquée que
sur le premier paragraphe.</p>
CSS
- On va pouvoir cibler le dernier élément p qui est numéro 4 dans la page

p:last-child{
background: #05ffb0;
border: 1px solid;
padding: 5px;
RÉSULTAT: