Pseudo-classes & pseudo-éléments
Donner vie et âme à tes éléments.
Imagine : tes éléments HTML sont des créatures dans un jeu. Pour l'instant, elles sont immobiles. Les pseudo-classes et pseudo-éléments sont les sorts qui vont leur donner vie.
La règle d'or à retenir :
- Un seul deux-points (
:) décrit un état (une pseudo-classe). L'élément est-il survolé (:hover) ? La case est-elle cochée (:checked) ? - Deux deux-points (
::) désignent une invocation (un pseudo-élément). Tu crées une partie virtuelle qui n'est pas dans le HTML, comme une décoration::before.
8.1 Les Pseudo-classes : Décrire les états
A. Les états d'interaction : :hover, :active, :focus
Ces trois états sont la base de toute interface interactive.
.bouton-quete:hover {
background: #00838f;
transform: translateY(-3px);
}
.bouton-quete:active {
transform: translateY(1px);
}
.bouton-quete:focus {
outline: 3px solid #e0f7fa;
}B. Les états positionnels : :first-child, :last-child
.liste li:first-child {
font-weight: bold;
}
.liste li:last-child {
opacity: 0.6;
}8.2 Les Pseudo-éléments : Invoquer des décorations
Un pseudo-élément (::) est un élément "virtuel". Combinons tout pour créer un bouton enchanté !
.bouton-enchanté {
position: relative;
}
/* Invocation AVANT le texte */
.bouton-enchanté::before {
content: '✨';
position: absolute;
left: 1rem;
opacity: 0;
transition: all 0.3s ease;
}
.bouton-enchanté:hover {
padding-left: 3.5rem; /* Place pour l'étoile */
}
.bouton-enchanté:hover::before {
opacity: 1;
}