Une pseudo-class (deux-points unique :) sélectionne des éléments en fonction de leur état ou de leur position — quelque chose qu'on ne peut pas exprimer avec une simple classe, comme « au survol » ou « le premier enfant ».
{ : blue; }
{ : solid; }
{ : (); }
{ : ; }
{ }
{ }
L'ordre des liens compte (LVHA) : :link, :visited, :hover, :active.
li:first-child { } /* first li among its siblings */
li:last-child { } /* last one */
li:nth-child(2) { } /* the 2nd */
li:nth-child(odd) { } /* 1st, 3rd, 5th... — zebra striping */
li:nth-child(3n) { } /* every 3rd */
p:only-child { } /* a p that's the sole child */
:nth-child() est puissante — 2n (pair), 2n+1 (impair), 3n (tous les trois), etc.
input:required { }
input:invalid { border-color: red; }
:is(h1, h2, h3) { } /* matches any — shortens selector lists */
.card:has(img) { } /* the "parent selector": a card that CONTAINS an img */
:not(.active) { } /* everything except .active */
Les pseudo-classes utilisent un deux-points (:hover, un état) ; les pseudo-éléments en utilisent deux (::before, une partie générée). Ne les confondez pas.
Les pseudo-classes vous permettent de styliser l'interaction (survol/focus — essentiel pour une UI utilisable et accessible) et la structure (rayures, premier/dernier) sans markup supplémentaire ni JavaScript.
Les modernes (:has, :is, :focus-visible) résolvent des problèmes qui auparavant nécessitaient JS ou des sélecteurs répétitifs.