9 pseudo-classes illustrées avec des exemples concrets et du code commenté.
Le premier lien du menu reçoit un style d'état "actif" via :first-child. Aucune classe CSS n'est ajoutée dans le HTML.
.menu li:first-child {
color: var(--accent);
background: rgba(vert, .08);
font-weight: 500;
}
/* Tous les autres : style neutre */
.menu li {
color: var(--muted);
}Cas d'usage classique : chaque item de liste a un border-bottom, sauf le dernier pour éviter une bordure double avec le conteneur.
.list li {
border-bottom: 1px solid #ddd;
padding: 11px 0;
}
.list li:last-child {
border-bottom: none; /* ✓ */
color: var(--accent3);
}Le premier <p> d'un article est automatiquement stylé comme un "chapeau" (lead paragraph) — plus grand et en italique — sans classe HTML.
article p:first-of-type {
font-size: 1.1rem;
color: var(--accent2);
font-style: italic;
/* Même si un <h3> précède le <p>,
ça fonctionne ! Contrairement
à :first-child. */
}Ce premier paragraphe est le chapeau de l'article. Il est stylé automatiquement grâce à :first-of-type.
Ce deuxième paragraphe revient au style de corps normal. Aucune classe CSS n'a été ajoutée dans le HTML.
Le troisième paragraphe reste identique au second.
Le dernier .card-item dans une liste sert de bouton "Voir plus". En CSS, on le distingue des autres via :last-of-type.
.cards .card-item {
color: var(--muted);
background: var(--surface);
}
.cards .card-item:last-of-type {
color: var(--accent4);
background: rgba(rose, .07);
text-align: center;
cursor: pointer;
}Alternance de fonds sur les lignes d'un tableau avec :nth-child(odd/even). Le multiple de 3 reçoit en plus un accent sur la première colonne.
tr:nth-child(odd) {
background: rgba(#fff, .02);
}
tr:nth-child(even) {
background: rgba(#fff, .045);
}
tr:nth-child(3n) td:first-child {
/* Toutes les 3 lignes */
color: var(--accent3);
}| # | Composant | Statut |
|---|---|---|
| 1 | Button | ✓ Stable |
| 2 | Input | ✓ Stable |
| 3 | Modal | ⚠ Beta |
| 4 | Tooltip | ✓ Stable |
| 5 | Dropdown | ✓ Stable |
| 6 | DataTable | ⚠ Beta |
| 7 | Calendar | ⏳ WIP |
Un item vide (sans contenu HTML) est automatiquement mis en évidence. Très utile pour déboguer un rendu dynamique ou signaler une erreur de données.
.notif-item:empty {
border: 1px dashed red;
background: repeating-linear-gradient(
45deg, transparent 0 4px,
rgba(red,.03) 4px 8px
);
}
.notif-item:empty::after {
/* Pseudo-élément de débogage */
content: "— aucun contenu —";
}Chaque bouton a une animation de "pression" pendant le clic. L'état :active dure aussi longtemps que le bouton est maintenu enfoncé.
.btn-primary {
background: rgba(vert, .1);
transition: all .15s;
}
.btn-primary:active {
background: var(--accent);
color: #000;
transform: scale(.95) translateY(1px);
}Chaque champ indique clairement quel élément est actif via un halo coloré. Essentiel pour la navigation au clavier (touche Tab). Ne jamais supprimer outline sans alternative !
input:focus {
outline: none; /* on remplace */
border-color: var(--accent2);
box-shadow: 0 0 0 3px
rgba(bleu, .12);
background: rgba(bleu, .04);
}En cliquant sur un lien d'ancre, l'URL change (#panel-a), et le panneau correspondant s'affiche via :target. Zéro JavaScript.
.tab-panel {
display: none; /* caché par défaut */
}
.tab-panel:target {
display: block; /* visible si l'URL contient son #id */
}
/* Bonus : surligner le lien actif */
.wrapper:has(#panel-a:target)
a[href="#panel-a"] {
color: var(--accent);
}Le HTML (HyperText Markup Language) est le langage de balisage standard du web. Il structure le contenu : titres, paragraphes, liens, images, formulaires...
Le CSS (Cascading Style Sheets) contrôle la présentation visuelle des éléments HTML : couleurs, polices, espacements, animations, mise en page...
JavaScript est le langage de programmation du web. Il rend les pages interactives : manipulation du DOM, appels API, logique applicative...
→ Regardez l'URL changer à chaque clic