Premier <p> — :first-of-type ✓ — style chapeau automatique.
Deuxième <p> — style normal.
Troisième <p> — style normal.
Ils ciblent respectivement le premier et le dernier enfant d'un parent, quelle que soit la balise. Attention au piège classique : p :first-child ne fonctionne pas si le p est précédé d'un h1 dans le parent — il ne sera sélectionné que s'il est littéralement le tout premier enfant.
Ils règlent ce problème en cherchant le premier (ou dernier) élément d'un type de balise donné parmi ses frères. Chaque type a son propre compteur, indépendamment des autres balises.
Premier <p> — :first-of-type ✓ — style chapeau automatique.
Deuxième <p> — style normal.
Troisième <p> — style normal.
Elle st la plus expressive : elle permet de cibler n'importe quel motif répétitif. 2n = les pairs, 2n+1 = les impairs, 3n+1 = un sur trois en commençant par le 1er. Les mots-clés odd et even sont des raccourcis pratiques. Jouez avec les curseurs dans le widget pour visualiser les formules en temps réel.
cible les éléments strictement vides (sans texte ni enfants dans le DOM). Utile pour afficher visuellement les "trous" dans une interface générée dynamiquement
il est actif pendant le clic, entre le mousedown et le mouseup. Parfait pour donner un retour tactile immédiat à l'utilisateur — une légère mise à l'échelle ou un changement de couleur suffit.
s'applique à l'élément qui a le focus (clavier ou souris). C'est la pseudo-classe la plus importante pour l'accessibilité : sans elle, un utilisateur naviguant au clavier ne sait pas où il se trouve. Ne jamais supprimer le focus sans le remplacer par une alternative visuelle.
est la plus méconnue et la plus élégante. Elle s'active quand l'id d'un élément correspond au fragment #ancre dans l'URL. Elle permet de construire des onglets ou des accordéons sans une seule ligne de JavaScript — cliquez les liens dans la démo pour voir.