Ce tutoriel explique l’utilité des pseudo-classes fonctionnelles en CSS pour cibler des éléments de manière plus efficace et lisible :

• :is() : Permet de regrouper plusieurs sélecteurs (logique OU) pour appliquer les mêmes styles, réduisant la redondance.
  Exemple : :is(h1, h2, h3) { color: [#333](https://raphael.salique.fr/liens/./add-tag/333); }

• :not() : Exclut un élément d’une sélection, utile pour appliquer des styles à tous sauf à quelques exceptions.
  Exemple : li:not(:last-child) { border-bottom: 1px solid [#ccc](https://raphael.salique.fr/liens/./add-tag/ccc); }

• :where() : Similaire à :is(), mais avec une spécificité nulle, idéal pour des styles de base facilement surchargeables.
  Exemple : :where(header, main, footer) { margin: 1rem 0; }

• :has() : Cible un élément parent en fonction de ses descendants, une nouveauté puissante pour des sélections contextuelles.
  Exemple : article:has(img) { border: 2px solid red; }

Ces sélecteurs améliorent la concision et la maintenabilité du code CSS.

Tout est dans le titre

:has est un sélecteur CSS3 qui "plante" en cas d'erreur sur le contenu de la sélection. Par exemple :has(h2) fonctionne alors :has(h2, ul, ::-truc-qui-rate) ne fonctionnera même pas pour h2 ou ul.

Tout est dans le titre

Tout est dans le titre

Tout est dans le titre (via https://blog.stephaniewalter.fr/semaine-pixels-18-mars-2016/ )

"Il faut plus de classes et moins de descendants, des sélecteurs courts et portables, des sélecteurs neutres vis-à-vis des éléments, et une approche générale qui consiste à penser à la maintenance et aux modifications à venir au moment de l'écriture des CSS"

Tout est dans le titre... toujours bon à savoir (via sebsauvage)

bon à savoir... je m'en servais déjà :)

Je trouve pourtant que ces parties de CSS sont très "sexy" :)