La pseudo-classe :has en CSS : Le guide complet

Il y a des nouveautés en CSS qui changent vraiment la manière de coder. Souvent, on entend parler de “révolution”, mais cette fois, cela ressemble. La pseudo-classe :has CSS fait partie de ces fonctionnalités qui rendent le langage plus intelligent, plus pratique et beaucoup plus agréable à utiliser. Si vous débutez, ne vous inquiétez pas, nous allons avancer tranquillement, étape par étape.

• Comprendre enfin comment exploiter la pseudo-classe :has pour rendre ses interfaces plus intelligentes, plus lisibles et plus modernes.
• Découvrir comment réduire l’usage inutile de JavaScript grâce à des solutions CSS propres, simples et efficaces.
• Savoir quand utiliser :has et quand l’éviter, afin de développer avec plus de sérénité et de confiance.

Pendant longtemps, le CSS était plutôt passif : on pouvait cibler un élément, mais rarement réagir à ce qu’il contient. Grâce à la pseudo-classe :has, tout change. Le sélecteur devient capable de dire : “je veux sélectionner cet élément à condition qu’il contienne quelque chose de précis”. Et ça ouvre énormément de possibilités pour vos futurs projets web.

Dans ce guide, nous allons donc découvrir la pseudo-classe :has en css, à quoi elle sert, comment l’utiliser correctement, ce que vous pouvez faire avec, mais aussi ses limites. L’objectif est simple : que vous puissiez repartir avec une compréhension claire, concrète, utilisable dans la vraie vie, et pas seulement des définitions théoriques.

Qu’est-ce que la pseudo-classe :has en CSS, exactement ?

La pseudo-classe :has en CSS permet de sélectionner un élément parent en fonction de ce qu’il contient comme enfant. Si cette phrase vous paraît un peu technique, c’est normal, restons calmes. En clair, c’est comme si vous disiez à CSS :

“Si cet élément possède tel élément à l’intérieur, alors applique-lui tel style.”

C’est quelque chose qui n’était tout simplement pas possible avant. Pendant des années, les développeurs ont rêvé de pouvoir cibler un parent selon son enfant. Résultat ? On se débrouillait avec du JavaScript, des classes ajoutées dynamiquement, des hacks tordus… et parfois même on abandonnait.

Avec la pseudo-classe :has, ce rêve devient enfin réalité.

Un exemple très simple pour comprendre. Imaginons un article avec une image à l’intérieur. Vous voulez styliser le conteneur uniquement s’il contient une image. Avant, c’était compliqué, mais maintenant :

article:has(img) {
    border: 2px solid #4CAF50;
    padding: 10px;
}

Grâce à cette règle, seuls les articles qui possèdent une image seront stylisés. Si un autre article n’a pas d’image, rien ne s’applique. C’est propre, clair, logique.

Comment fonctionne réellement :has css ?

Vous allez vite remarquer que la pseudo-classe :has agit un peu comme une condition. Elle vérifie ce qu’il y a à l’intérieur, puis décide d’agir ou non. Techniquement, elle sert à filtrer les éléments qui correspondent à une situation donnée.

La syntaxe de base est très simple :

sélecteur:has(condition à l’intérieur) { styles }

Vous remplacez “sélecteur” par l’élément que vous voulez cibler, et “condition” par l’élément que vous souhaitez vérifier. Pas besoin de formule magique, pas besoin d’un doctorat en CSS, juste une logique très naturelle.

Prenons maintenant un exemple concret de la vie de développeur. Vous avez un formulaire. Certains champs sont obligatoires, d’autres non. Vous souhaitez mettre en évidence uniquement les champs qui contiennent une erreur, par exemple un message en dessous.

Avant, le JavaScript était obligatoire… Maintenant :

.form-group:has(.error-message) {
    background: #ffe6e6;
    border: 1px solid red;
}

Automatiquement, dès qu’un groupe du formulaire contient un message d’erreur, il prend une couleur différente. Vous n’avez rien ajouté, aucun script, juste du CSS élégant et moderne.

Cet exemple montre bien que cette nouveauté n’est pas juste un gadget pour développeurs curieux. Elle simplifie littéralement la vie quotidienne.

Utiliser :has pour améliorer vos interfaces utilisateur

Ce que j’aime particulièrement avec la pseudo-classe :has, c’est qu’elle rend le CSS plus “intelligent”. On peut créer des comportements conditionnels simples sans passer par JavaScript. Par exemple, imaginons un menu de navigation avec des sous-menus. Vous voulez ajouter une icône uniquement aux éléments qui possèdent un sous-menu.

Avant, on ajoutait une classe “has-children” à la main ou avec JS. Aujourd’hui :

nav li:has(ul) {
    position: relative;
}

nav li:has(ul)::after {
    content: "▾";
    position: absolute;
    right: 5px;
}

Seuls les éléments qui contiennent une liste imbriquée affichent cette petite flèche. C’est logique, élégant, et surtout très lisible pour quelqu’un qui reprend votre code.

Vous pouvez aussi rendre un formulaire plus vivant. Par exemple, changer l’apparence d’un label si l’utilisateur a déjà rempli le champ. Il suffit de vérifier si l’input contient quelque chose ou est en focus combiné avec :has.

La pseudo-classe :has et l’accessibilité

On n’y pense pas toujours, mais ce genre d’outil peut aussi améliorer l’accessibilité. Vous pouvez par exemple mettre en évidence des sections importantes uniquement si elles contiennent du contenu clé, ou encore rendre des zones plus visibles lorsqu’elles incluent des éléments interactifs.

Imaginez une carte d’article de blog. Certaines possèdent un bouton “Lire la suite”, d’autres non. Vous pouvez renforcer le design de celles qui ont ce bouton :

.card:has(a.read-more) {
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
}

Cela rend immédiatement ces cartes plus visibles pour l’utilisateur. Sans JavaScript. Sans triche.

Compatibilité de la pseudo-classe :has en CSS : pouvez-vous l’utiliser dès maintenant ?

Question importante et très concrète. À quoi sert une fonctionnalité magique si elle ne fonctionne nulle part ?

La bonne nouvelle, c’est que la pseudo-classe :has est aujourd’hui supportée par la grande majorité des navigateurs modernes. Chrome, Edge, Safari, Opera, Firefox récent… la prise en charge s’est énormément améliorée. Bien sûr, il peut exister quelques vieilles versions qui ne la reconnaissent pas encore, mais pour la plupart des projets actuels, vous pouvez l’utiliser sereinement.

Si votre public cible est très large ou si vous travaillez sur un projet institutionnel, il peut être sage de tester. Vous pouvez également imaginer des styles « progressive enhancement » : si le navigateur supporte :has css, vous offrez une meilleure expérience. Sinon, le site reste utilisable, simplement un peu moins sophistiqué.

Nous allons maintenant entrer dans des usages encore plus concrets, ceux que vous rencontrerez dans vos projets. L’objectif reste le même : que vous puissiez utiliser cette fonctionnalité en comprenant ce que vous faites.

Aller plus loin avec la pseudo-classe :has en CSS : des exemples qui changent vraiment la pratique

Maintenant que vous avez compris le principe, voyons comment la pseudo-classe :has peut transformer des situations très courantes dans vos interfaces. Vous allez voir que parfois, une simple ligne avec :has css peut remplacer plusieurs lignes de JavaScript.

Commençons avec un cas typique : afficher un style différent quand une carte de produit contient une promotion. Imaginons une div « product » et, à l’intérieur, parfois une étiquette “promo”. Vous voulez que la carte soit plus visible lorsque cette étiquette est présente.

Des formations informatique pour tous !

Débutant ou curieux ? Apprenez le développement web, le référencement, le webmarketing, la bureautique, à maîtriser vos appareils Apple et bien plus encore…

Formateur indépendant, professionnel du web depuis 2006, je vous accompagne pas à pas et en cours particulier, que vous soyez débutant ou que vous souhaitiez progresser. En visio, à votre rythme, et toujours avec pédagogie.

Découvrez mes formations Qui suis-je ?

.product:has(.promo) {
    border: 2px solid #ff8c00;
    transform: scale(1.02);
}

Résultat ? Les produits avec réduction ressortent naturellement. Vous n’avez pas besoin de parcourir le DOM avec JavaScript, ni d’ajouter des classes manuellement. Le CSS sait lire ce qu’il y a à l’intérieur et décide tout seul.

Autre exemple très courant, certainement celui que vous rencontrerez souvent : gérer des formulaires dynamiques. On peut par exemple mettre en évidence un champ uniquement quand il contient une valeur, ou quand une erreur apparaît. Vous pouvez même faire réagir un conteneur si un champ spécifique est sélectionné.

.form-block:has(input:focus) {
    background: #f5f8ff;
    border-color: #3366ff;
}

Cette règle signifie que dès qu’un input à l’intérieur du bloc reçoit le focus, tout le bloc se met en valeur. C’est beaucoup plus agréable à l’usage pour l’utilisateur, car il comprend tout de suite où il se trouve et ce qu’il est en train de faire.

Utiliser la pseudo classe :has pour créer des effets conditionnels visuels intelligents

Ce qui rend la pseudo-classe :has fascinante, c’est qu’elle permet au CSS de devenir presque “réactif”. On n’écrit plus seulement des styles figés, mais des styles qui s’adaptent à la structure et au contenu.

Prenons un tableau. Certains tableaux contiennent des lignes importantes, d’autres non. Vous pouvez décider de styliser le tableau différemment uniquement s’il contient une ligne marquée comme prioritaire.

table:has(tr.important) {
    border: 3px solid #d32f2f;
    background: #fff7f7;
}

Instantanément, vos tableaux critiques deviennent visuellement différents. Si un jour vous supprimez la ligne importante, le style disparaît automatiquement. Pas besoin d’y penser, pas besoin de nettoyer des classes. C’est ce genre de petit confort qui fait la différence dans le quotidien d’un développeur.

On peut aussi appliquer cela aux articles de blog. Un article contenant une vidéo peut par exemple avoir une mise en page particulière.

.article:has(video) {
    padding: 20px;
    background: #eef6ff;
}

Cela permet de créer des mises en page dynamiques et intelligentes, sans aucune intervention manuelle.

La pseudo-classe :has et l’expérience utilisateur : un duo précieux

Quand on parle de CSS, on oublie parfois l’essentiel : derrière chaque propriété, il y a un utilisateur. La pseudo-classe :has en css n’est pas seulement une fonctionnalité technique. Elle améliore l’expérience. Elle rend l’interface plus cohérente, plus réactive, et parfois même plus rassurante.

Imaginez un formulaire avec des champs facultatifs et obligatoires. Vous pouvez facilement mettre en valeur les groupes contenant des champs obligatoires.

.form-group:has(input[required]) label::after {
    content: " *";
    color: red;
}

Vous vous évitez ainsi de répéter mille fois des astérisques dans votre HTML. Le CSS fait le travail pour vous. C’est plus propre, plus maintenable, et beaucoup plus agréable à relire.

J’ai déjà vu des projets où les développeurs copiaient-collaient manuellement des étoiles dans chaque label obligatoire. Quand le client a demandé de changer l’étoile en texte “Obligatoire”, ils ont dû retoucher toutes les pages, une par une… Aujourd’hui, avec :has en CSS, ce genre de situation galère n’existe plus !

Combiner :has avec d’autres sélecteurs pour décupler sa puissance

Là où :has devient vraiment impressionnante, c’est quand on commence à la combiner avec d’autres sélecteurs. Elle fonctionne très bien avec :not, :nth-child, :checked, ou encore des sélecteurs de structure.

Par exemple, vous pouvez cibler une carte uniquement si elle contient au moins trois éléments enfants spécifiques.

.card:has(.info:nth-child(3)) {
    background: #f0fff0;
}

Vous pouvez aussi gérer des cas comme une section vide, mais avec une condition précise. Par exemple, changer l’apparence d’un conteneur uniquement s’il ne possède pas d’image.

.section:not(:has(img)) {
    background: #f2f2f2;
    color: #555;
}

C’est presque poétique : vous pouvez dire “si tu n’as pas ça, alors fais ceci”. On se rapproche d’un langage naturel, et cela rend le CSS plus expressif, presque plus “humain”.

Encore un cas intéressant : gérer des cases à cocher qui influencent leur parent. Avant, il fallait absolument du JavaScript. Maintenant, plus forcément.

.option:has(input:checked) {
    background: #e3ffe3;
    border-color: #2e7d32;
}

Dès que l’utilisateur coche la case, tout le bloc réagit visuellement. C’est clair, agréable et intuitif.

Performance : est-ce que :has css ralentit vraiment les sites ?

C’est une question tout à fait légitime. On pourrait croire que, puisque la pseudo-classe :has analyse ce qu’il y a à l’intérieur des éléments, cela va forcément alourdir le rendu. En réalité, les navigateurs modernes ont beaucoup travaillé sur l’optimisation. Tant que vous l’utilisez intelligemment et pas de manière abusive dans des structures monstrueuses, tout se passera bien.

Évitez simplement de l’employer à outrance comme un réflexe systématique. Utilisez-la quand elle simplifie vraiment votre logique, remplace du JavaScript inutile, ou améliore la compréhension de votre code. Si vous travaillez par exemple sur des interfaces riches, elle devient un atout. Si vous faites une simple page statique basique, vous n’en aurez peut-être même pas besoin.

L’essentiel est de comprendre que c’est un outil puissant. Comme tous les outils puissants, il demande un peu de réflexion, mais il est loin d’être dangereux quand il est bien utilisé.

Quand éviter la pseudo-classe :has

Même si elle est fantastique, la pseudo-classe :has css n’est pas toujours la solution miracle. Il existe des cas où JavaScript reste plus adapté, notamment lorsque vous devez gérer des interactions logiques complexes, des animations conditionnelles très pointues ou des modifications de contenu. CSS reste un langage de style. Il peut devenir intelligent, mais il ne remplacera pas totalement la logique d’un langage de programmation.

De plus, si vous devez absolument garantir un comportement identique sur des navigateurs très anciens, vous devrez prévoir des solutions de secours. Cela dit, pour la majorité des projets modernes, vous pouvez avancer sereinement.

Pour aller plus loin : La liste des pseudo-classes en CSS

Pourquoi devriez-vous adopter :has sans attendre ?

Si vous avez lu jusque-là, vous l’avez certainement compris : la pseudo-classe :has n’est pas juste une nouveauté sympathique. C’est une évolution majeure du CSS moderne. Elle permet enfin de faire des choses que l’on n’osait même plus espérer. Elle rend vos interfaces plus intelligentes, votre code plus propre, et votre travail plus agréable. Ce n’est pas seulement une question de technique, c’est aussi une question de confort et de plaisir de création.

En adoptant :has en CSS dès maintenant, vous entrez dans une façon plus moderne de penser le front-end. Vous allez réduire la dépendance à JavaScript pour des comportements simples, alléger votre code, éviter des bricolages compliqués et surtout gagner en clarté. Et croyez-moi, dans quelques années, on se demandera comment on faisait sans.

Si vous développez des sites, si vous construisez des interfaces, si vous aimez quand votre code devient plus logique et plus lisible, alors cette pseudo-classe mérite clairement une place dans votre boîte à outils. Prenez le temps de l’expérimenter, jouez avec des exemples, testez-la sur vos projets. Vous verrez, très vite, elle deviendra une habitude naturelle… et vous aurez l’impression que le CSS vous comprend enfin un peu mieux.

Alban

Fondateur de l’agence Créa-troyes, affiliée France Num
Intervenant en Freelance.
Contactez-moi

crea-troyes.fr