Apprends à styliser les éléments en fonction de leur état ou position en utilisant les pseudo-classes CSS comme :hover, :focus, :nth-child(), et :not().
Une pseudo-classe est un mot-clé ajouté à un sélecteur qui cible les éléments en fonction d'un état ou d'une position spécifique dans l'arborescence du document. Elles sont préfixées par deux-points simples :.
Contrairement aux sélecteurs classiques qui correspondent aux éléments par leur nom de balise, classe ou ID, les pseudo-classes te permettent de styliser les éléments en fonction de conditions dynamiques — si l'utilisateur survole l'élément, si un champ a le focus, ou où un élément se situe parmi ses frères et sœurs.
:hover — Quand le pointeur de l'utilisateur est sur l'élément.:focus — Quand l'élément a le focus clavier (par exemple, un input cliqué ou un bouton atteint par tabulation).:active — Durant le moment où l'élément est activé (par exemple, pendant qu'un bouton est enfoncé).:visited — Un lien que l'utilisateur a déjà visité.:disabled / :enabled — Éléments de formulaire qui sont désactivés ou activés.:checked — Cases à cocher ou boutons radio qui sont sélectionnés.Les pseudo-classes structurelles ciblent les éléments en fonction de leur position parmi leurs frères et sœurs :
:first-child — L'élément qui est le premier enfant de son parent.:last-child — L'élément qui est le dernier enfant de son parent.:nth-child(n) — Cible les éléments par leur position. L'argument peut être un nombre, un mot-clé ou une formule :
:nth-child(3) — le 3ème enfant:nth-child(odd) — 1er, 3ème, 5ème, ... enfants:nth-child(even) — 2ème, 4ème, 6ème, ... enfants:nth-child(3n) — tous les 3èmes enfants (3, 6, 9, ...):nth-child(2n+1) — identique à odd:only-child — Un élément qui n'a pas de frères et sœurs.:not(selector) — Correspond aux éléments qui ne correspondent pas au sélecteur donné. Par exemple, p:not(.special) cible tous les paragraphes qui n'ont pas la classe special.<style>
ul {
list-style: none;
padding: 0;
}
li {
padding: 8px 12px;
border-bottom: 1px solid #ddd;
}
/* First item gets a top border */
li:first-child {
border-top: 1px solid #ddd;
font-weight: bold;
}
/* Alternate row coloring */
li:nth-child(odd) {
background-color: #f9f9f9;
}
/* Last item has special color */
li:last-child {
color: crimson;
}
/* Hover effect */
li:hover {
background-color: #e0e0e0;
}
</style>
<ul>
<li>First item (bold + top border)</li>
<li>Second item</li>
<li>Third item</li>
<li>Fourth item</li>
<li>Last item (crimson)</li>
</ul>Que cible le sélecteur `li:nth-child(even)` ?