La sélection :has() en CSS : Les petits trucs qui changent la vie

Salut la famille ! Aujourd'hui on va parler d'un truc qui fait pas mal de bruit dans le monde du CSS : le sélecteur :has(). En gros, c'est ce truc magique qui nous permet ENFIN de sélectionner les éléments parents. Oui, après toutes ces années à galérer, c'est enfin possible !

1. Pour les bannières qui en ont dans le ventre

Premier exemple tout simple : imaginez une bannière classique qui doit s'adapter quand on lui ajoute un bouton. Au lieu de créer 15 classes différentes, on fait ça :

.banner:has(button) {
    display: flex;
    justify-content: space-between;
    gap: var(--space-s);
    text-align: revert;
}

Obtenir le code complet + démo

Et pouf ! La bannière s'adapte toute seule. Pratique, non ?

2. Les labels qui se la jouent flex

Vous connaissez la galère des labels avec des checkboxes ? Plus besoin de classes partout, maintenant c'est :

label:has(input) {
    display: flex;
    align-items: flex-start;
    gap: var(--space-s);
}

Obtenir le code complet + démo

3. Le coup du target, mais en mieux

Vous savez, quand on met #mon-element dans l'URL pour cibler un truc ? Maintenant on peut styler son parent direct. C'est pas la révolution, mais ça dépanne bien :

section:has(:target) {
    background: var(--color-light-shade);
    border: 2px solid var(--color-primary);
}

Obtenir le code complet + démo

4. L'effet "spotlight" sans prise de tête

Vous voyez ces galeries d'images où quand on survole une image, les autres deviennent plus ternes ? Avant, c'était un vrai casse-tête. Maintenant :

.tiles:has(:hover) .tile:not(:hover) {
    opacity: 70%;
}

Obtenir le code complet + démo

Simple, efficace, pas besoin de sortir la calculette scientifique.

Pour conclure

:has() n'est peut-être pas la solution miracle à tous vos problèmes CSS, mais c'est un sacré bon outil à avoir dans sa boîte. C'est comme un bon tournevis : pas toujours indispensable, mais quand on en a besoin, on est bien content de l'avoir sous la main.