Utiliser les propriétés CSS (Cascading Style

Sheets)

 Pseudo-classes
Les pseudo-classes en CSS sont utilisées pour définir des styles spéciaux pour des états
spécifiques d'un élément. Elles sont préfixées par un double point (:) et suivies d'un mot-clé qui représente
l'état spécifique.

Voici quelques-unes des pseudo-classes les plus couramment utilisées en CSS:

:hover - Applique des styles à un élément lorsque la souris est placée au-dessus de lui.
:active - Applique des styles à un élément pendant qu'il est activé (par exemple, lorsqu'un bouton est
enfoncé).
:focus - Applique des styles à un élément lorsqu'il est en état de focus. C'est couramment utilisé avec des
éléments de formulaire.
:first-child et :last-child - Sélectionne respectivement le premier ou le dernier enfant d'un élément parent.
:nth-child(n) - Sélectionne l'enfant "n" d'un élément parent.
 Utiliser les propriétés CSS (Cascading Style
Sheets)

 Pseudo-classes
Exemple : :visited

<p><a href="https ://www.google.com"> a :visited { color : #00ff00; }

Cette page est visitée
</a></p>
<p><a href=" https ://www.ofppt.ma">
Cette page est visitée
Essayez celle-ci peut-être ?
</a></p>
Essayez celle-ci peut-être ?

a :hover { background-color : gold; }

Exemple : :hover
Ce lien sera écrit sur un fond doré lors du survol.
<p>
<a href="#">Ce lien sera écrit sur un fond doré lors du survol.
</a>
</p>
Ce lien sera écrit sur un fond doré lors du survol.
 Utiliser les propriétés CSS (Cascading Style
Sheets)
 Pseudo-classes
Pseudo-classe :hover
La pseudo-classe :hover désigne un objet survolé par le curseur de la souris,
il peut être un hyperlien ou n'importe quel autre objet.
 Utiliser les propriétés CSS (Cascading Style
Sheets)
 Pseudo-classes

Mme .NAAMANY MOUNIA 7

 Utiliser les propriétés CSS (Cascading Style
Sheets)
 Pseudo-classes

Exemple : :focus
.prenom :focus {
<input class="prenom" value="Rouge si focus"> background : yellow;
<input class="nom" value="Vert si focus"> color : red;
}
Rouge si focus Vert si focus .nom :focus {
background : yellow;
color : lime;
Rouge si focus Vert si focus }

Exemple : :invalid

input :invalid {
<input type="email">
border : 2px solid red;
}
Avec Email faux

Avec Email juste

 Utiliser les propriétés CSS (Cascading Style
Sheets)
 Pseudo-element

Les pseudo-éléments en CSS sont utilisés pour styliser des parties spécifiques d'un élément qui
ne peuvent pas être ciblées directement avec les sélecteurs traditionnels. Contrairement aux pseudo-classes
qui sélectionnent des éléments basés sur leur état ou leur position, les pseudo-éléments permettent de cibler
et de styliser des parties d'un élément.
Les pseudo-éléments sont préfixés par deux deux-points (::). Voici quelques pseudo-éléments courants :

::before - Insère du contenu avant le contenu d'un élément.

::after - Insère du contenu après le contenu d'un élément.
::first-line - Cible la première ligne d'un bloc de texte
::first-letter - Cible la première lettre d'un bloc de texte.
 Utiliser les propriétés CSS (Cascading Style
Sheets)
 Pseudo-element
 Utiliser les propriétés CSS (Cascading Style
Sheets)
 Pseudo-element
 Utiliser les propriétés CSS (Cascading Style
Sheets)
 Pseudo-element
En CSS, ::before est un pseudo-élément qui permet d'insérer un contenu avant le contenu d'un élément
cible. De la même manière, ::after permet d'insérer du contenu après le contenu d'un élément cible. Ces
pseudo-éléments sont souvent utilisés pour ajouter des ornementations, des icônes ou d'autres petits
éléments de design sans avoir à modifier le HTML.
Exemple:

Supposons que vous souhaitiez ajouter un Trèfle devant chaque élément de liste (<li>):

li::before {
content: "♣";
}