: h1:has(+ p) { } Je cible l’élément à condition que son frère suivant soit un : label:has(+ input) { } Compatibilité La compatibilité de :has() a été placée au niveau de Baseline 2023, c’est à dire que l’ensemble des navigateurs supportent cette fonctionnalité depuis (décembre) 2023. Il est parfaitement possible de tester si un navigateur supporte :has() à l’aide de la règle @supports() : @supports (selector(:has(*))) { /* ici les styles si :has() est supporté */ } @supports not (selector(:has(*))) { /* ici les styles si :has() n’est pas supporté */ } Spécificité Bien qu’appartenant aux pseudo-classes, :has() ne compte pas dans le calcul de la spécificité des sélecteurs CSS, en revanche son contenu est pris en compte : div:has(img) { /* spécificité (0,0,2) */ /* :has ne compte pas */ /* on compte les 2 éléments div et img */ } div:has(img, #hero) { /* spécificité (1,0,1) */ /* :has ne compte pas */ /* on compte le poids le plus fort dans la liste (ici l’id #hero) */ } Combinaisons :has() peut être combiné avec d’autres sélecteurs tels que :not(), :where() ou :is(). Cependant il n’est pas autorisé d’imbriquer :has() au sein d’un autre :has() (en même temps qui voudrait faire ça ?). Voici quelques exemples : p:has(:not(span)) : p qui contient tout descendant sauf un span p:not(:has(span)) : p qui ne contient pas de descendant span p:where(:has(div)) : p qui contient un descendant span. Fonctionnellement identique à p:has(span) mais avec une spécificité moindre (0,0,1) :where(p:has(div)) : p qui contient un descendant span. Fonctionnellement identique à p:has(span) mais avec une spécificité nulle (0,0,0) Quelques cas d’usage utiles :has() est un sélecteur tout à fait révolutionnaire qui ouvre la voie vers de multiples nouvelles possibilités en CSS. Il est difficile de rassembler tous les cas d’usage utiles que cette pseudo-classe permet aujourd’hui de résoudre. Voici cependant une petite sélection parmi mes préférés… Appliquer un effet sur la page si une modale est ouverte Je souhaite cibler body et lui appliquer un effet de flou via backdrop-filter, uniquement s’il contient un élément ayant à la fois la classe .modal et .is-opened : body:has(.modal.is-opened) { backdrop-filter: blur(8px); } Démo sur Codepen Pour ce cas d’usage précis, il peut être pertinent d’envisage d’utiliser qui apporte nativement ces fonctionnalités d’obscurcissement ou de flou de page. Ajouter des gouttières conditionnellement Je souhaite une gouttière pour espacer les éléments de ma "Card", mais uniquement si celle-ci possède une image : .card { display: grid; grid-template-columns: auto 1fr; } .card:has(>img) { gap: 20px; } Encore plus fort : une gouttière doit s’appliquer uniquement si le groupe de cards a exactement deux enfants : .card-group:has(> :nth-child(2):last-child) { gap: 20px; } Démo sur Codepen Décorer le parent d’une case à cocher au clic Je veux une couleur de fond sur le parent du label et de la checkbox quand celle-ci est cochée : .form-group:has(input:checked) { background: #ddd; } Démo sur Codepen Adapter les styles au nombre d’enfants Je souhaite adapter les styles et la taille des enfants selon leur nombre au sein de leur parent : .parent { &:has(> :nth-child(10)) { } &:has(> :nth-child(20)) { } &:has(> :nth-child(30)) { } } Démo sur Codepen Modifier les variables de la page au clic sur une checkbox À partir d’une case à cocher située n’importe où dans le DOM, je veux inverser les couleurs des variables de la page au moment où cette checkbox est cochée : ... n’importe où dans le DOM ... toggle light/dark body { --bg-color: #eee; --text-color: #222; background-color: var(--bg-color); color: var(--text-color); } body:has(.toggle:checked) { --bg-color: #222; --text-color: #eee; } Démo sur Codepen Bénéficier de Container Queries sans connaître le parent /* Je crée un Container Query sur le parent de .component (quel qu’il soit) */ :has(> .component) { container-type: inline-size; } /* J’adapte les styles de .component selon la taille du parent */ .component { @container (width > 500px) { color: hotpink; } } Démo sur Codepen Conclusion La portée et la puissance du sélecteur :has() dépassent de loin toutes les autres façons historiques de cibler les éléments en CSS. Grâce à :has() il est possible de cibler n’importe quel élément du DOM à partir de n’importe quel autre élément du DOM. On pourrait se poser des questions légitimes sur les performances d’un sélecteur permettant de parcourir tout le DOM dans tous les sens. Dans son article consacré à ce sélecteur, Jen Simmons explique que les travaux sur :has() ont conduit à des spécifications dédiées aux performances et que les navigateurs ont été retravaillés pour s’adapter à ces spécifications. Les résultats sont excellents (traduction d’un extrait de son article) : Il est enfin possible d’implémenter un tel sélecteur avec des performances fantastiques, même en présence de grands arbres DOM et d’un grand nombre de sélecteurs :has(). Ressources Documentation MDN : https://developer.mozilla.org/fr/docs/Web/CSS/:has Article de Jen Simmons (avec un paragraphe sur les performances) : https://webkit.org/blog/13096/css-has-pseudo-class/ Smashing Magazine : Level Up Your CSS Skills With The :has() Selector LogRocket : The advanced guide to the CSS :has() selector LambdaTest : Complete Guide to CSS :has() Selector Source de l’illustration principale : Pixabay : Ai généré, Darth vader, Star wars. Utilisation gratuite. Publié par Alsacreations.com"> à condition qu’il contienne un descendant : a:has(img) { } Je cible l’élément à condition qu’il contienne un enfant direct : a:has(> img) { } Je cible n’importe quel élément du DOM à condition qu’il contienne un descendant : :has(img) { } Je cible l’élément à condition qu’il contienne un descendant de classe .icon ou de classe .text : button:has(.icon, .text) { } Je masque l’élément s’il contient un descendant ou : svg:has(symbol, defs) { display: none; } Je cible l’élément de classe .container à condition qu’il contienne un enfant direct unique : .container:has(> img:only-child) { } Je cible l’élément de classe .form-group à condition qu’il contienne un élément à l’état coché : .form-group:has(input:checked) { } Je cible l’élément à condition qu’il contienne un élément à l’état :focus (quasi identique au sélecteur :focus-within) : form:has(:focus) { } Je cible l’élément à condition que son frère suivant soit un : h1:has(+ p) { } Je cible l’élément à condition que son frère suivant soit un : label:has(+ input) { } Compatibilité La compatibilité de :has() a été placée au niveau de Baseline 2023, c’est à dire que l’ensemble des navigateurs supportent cette fonctionnalité depuis (décembre) 2023. Il est parfaitement possible de tester si un navigateur supporte :has() à l’aide de la règle @supports() : @supports (selector(:has(*))) { /* ici les styles si :has() est supporté */ } @supports not (selector(:has(*))) { /* ici les styles si :has() n’est pas supporté */ } Spécificité Bien qu’appartenant aux pseudo-classes, :has() ne compte pas dans le calcul de la spécificité des sélecteurs CSS, en revanche son contenu est pris en compte : div:has(img) { /* spécificité (0,0,2) */ /* :has ne compte pas */ /* on compte les 2 éléments div et img */ } div:has(img, #hero) { /* spécificité (1,0,1) */ /* :has ne compte pas */ /* on compte le poids le plus fort dans la liste (ici l’id #hero) */ } Combinaisons :has() peut être combiné avec d’autres sélecteurs tels que :not(), :where() ou :is(). Cependant il n’est pas autorisé d’imbriquer :has() au sein d’un autre :has() (en même temps qui voudrait faire ça ?). Voici quelques exemples : p:has(:not(span)) : p qui contient tout descendant sauf un span p:not(:has(span)) : p qui ne contient pas de descendant span p:where(:has(div)) : p qui contient un descendant span. Fonctionnellement identique à p:has(span) mais avec une spécificité moindre (0,0,1) :where(p:has(div)) : p qui contient un descendant span. Fonctionnellement identique à p:has(span) mais avec une spécificité nulle (0,0,0) Quelques cas d’usage utiles :has() est un sélecteur tout à fait révolutionnaire qui ouvre la voie vers de multiples nouvelles possibilités en CSS. Il est difficile de rassembler tous les cas d’usage utiles que cette pseudo-classe permet aujourd’hui de résoudre. Voici cependant une petite sélection parmi mes préférés… Appliquer un effet sur la page si une modale est ouverte Je souhaite cibler body et lui appliquer un effet de flou via backdrop-filter, uniquement s’il contient un élément ayant à la fois la classe .modal et .is-opened : body:has(.modal.is-opened) { backdrop-filter: blur(8px); } Démo sur Codepen Pour ce cas d’usage précis, il peut être pertinent d’envisage d’utiliser qui apporte nativement ces fonctionnalités d’obscurcissement ou de flou de page. Ajouter des gouttières conditionnellement Je souhaite une gouttière pour espacer les éléments de ma "Card", mais uniquement si celle-ci possède une image : .card { display: grid; grid-template-columns: auto 1fr; } .card:has(>img) { gap: 20px; } Encore plus fort : une gouttière doit s’appliquer uniquement si le groupe de cards a exactement deux enfants : .card-group:has(> :nth-child(2):last-child) { gap: 20px; } Démo sur Codepen Décorer le parent d’une case à cocher au clic Je veux une couleur de fond sur le parent du label et de la checkbox quand celle-ci est cochée : .form-group:has(input:checked) { background: #ddd; } Démo sur Codepen Adapter les styles au nombre d’enfants Je souhaite adapter les styles et la taille des enfants selon leur nombre au sein de leur parent : .parent { &:has(> :nth-child(10)) { } &:has(> :nth-child(20)) { } &:has(> :nth-child(30)) { } } Démo sur Codepen Modifier les variables de la page au clic sur une checkbox À partir d’une case à cocher située n’importe où dans le DOM, je veux inverser les couleurs des variables de la page au moment où cette checkbox est cochée : ... n’importe où dans le DOM ... toggle light/dark body { --bg-color: #eee; --text-color: #222; background-color: var(--bg-color); color: var(--text-color); } body:has(.toggle:checked) { --bg-color: #222; --text-color: #eee; } Démo sur Codepen Bénéficier de Container Queries sans connaître le parent /* Je crée un Container Query sur le parent de .component (quel qu’il soit) */ :has(> .component) { container-type: inline-size; } /* J’adapte les styles de .component selon la taille du parent */ .component { @container (width > 500px) { color: hotpink; } } Démo sur Codepen Conclusion La portée et la puissance du sélecteur :has() dépassent de loin toutes les autres façons historiques de cibler les éléments en CSS. Grâce à :has() il est possible de cibler n’importe quel élément du DOM à partir de n’importe quel autre élément du DOM. On pourrait se poser des questions légitimes sur les performances d’un sélecteur permettant de parcourir tout le DOM dans tous les sens. Dans son article consacré à ce sélecteur, Jen Simmons explique que les travaux sur :has() ont conduit à des spécifications dédiées aux performances et que les navigateurs ont été retravaillés pour s’adapter à ces spécifications. Les résultats sont excellents (traduction d’un extrait de son article) : Il est enfin possible d’implémenter un tel sélecteur avec des performances fantastiques, même en présence de grands arbres DOM et d’un grand nombre de sélecteurs :has(). Ressources Documentation MDN : https://developer.mozilla.org/fr/docs/Web/CSS/:has Article de Jen Simmons (avec un paragraphe sur les performances) : https://webkit.org/blog/13096/css-has-pseudo-class/ Smashing Magazine : Level Up Your CSS Skills With The :has() Selector LogRocket : The advanced guide to the CSS :has() selector LambdaTest : Complete Guide to CSS :has() Selector Source de l’illustration principale : Pixabay : Ai généré, Darth vader, Star wars. Utilisation gratuite. Publié par Alsacreations.com">
: h1:has(+ p) { } Je cible l’élément à condition que son frère suivant soit un : label:has(+ input) { } Compatibilité La compatibilité de :has() a été placée au niveau de Baseline 2023, c’est à dire que l’ensemble des navigateurs supportent cette fonctionnalité depuis (décembre) 2023. Il est parfaitement possible de tester si un navigateur supporte :has() à l’aide de la règle @supports() : @supports (selector(:has(*))) { /* ici les styles si :has() est supporté */ } @supports not (selector(:has(*))) { /* ici les styles si :has() n’est pas supporté */ } Spécificité Bien qu’appartenant aux pseudo-classes, :has() ne compte pas dans le calcul de la spécificité des sélecteurs CSS, en revanche son contenu est pris en compte : div:has(img) { /* spécificité (0,0,2) */ /* :has ne compte pas */ /* on compte les 2 éléments div et img */ } div:has(img, #hero) { /* spécificité (1,0,1) */ /* :has ne compte pas */ /* on compte le poids le plus fort dans la liste (ici l’id #hero) */ } Combinaisons :has() peut être combiné avec d’autres sélecteurs tels que :not(), :where() ou :is(). Cependant il n’est pas autorisé d’imbriquer :has() au sein d’un autre :has() (en même temps qui voudrait faire ça ?). Voici quelques exemples : p:has(:not(span)) : p qui contient tout descendant sauf un span p:not(:has(span)) : p qui ne contient pas de descendant span p:where(:has(div)) : p qui contient un descendant span. Fonctionnellement identique à p:has(span) mais avec une spécificité moindre (0,0,1) :where(p:has(div)) : p qui contient un descendant span. Fonctionnellement identique à p:has(span) mais avec une spécificité nulle (0,0,0) Quelques cas d’usage utiles :has() est un sélecteur tout à fait révolutionnaire qui ouvre la voie vers de multiples nouvelles possibilités en CSS. Il est difficile de rassembler tous les cas d’usage utiles que cette pseudo-classe permet aujourd’hui de résoudre. Voici cependant une petite sélection parmi mes préférés… Appliquer un effet sur la page si une modale est ouverte Je souhaite cibler body et lui appliquer un effet de flou via backdrop-filter, uniquement s’il contient un élément ayant à la fois la classe .modal et .is-opened : body:has(.modal.is-opened) { backdrop-filter: blur(8px); } Démo sur Codepen Pour ce cas d’usage précis, il peut être pertinent d’envisage d’utiliser qui apporte nativement ces fonctionnalités d’obscurcissement ou de flou de page. Ajouter des gouttières conditionnellement Je souhaite une gouttière pour espacer les éléments de ma "Card", mais uniquement si celle-ci possède une image : .card { display: grid; grid-template-columns: auto 1fr; } .card:has(>img) { gap: 20px; } Encore plus fort : une gouttière doit s’appliquer uniquement si le groupe de cards a exactement deux enfants : .card-group:has(> :nth-child(2):last-child) { gap: 20px; } Démo sur Codepen Décorer le parent d’une case à cocher au clic Je veux une couleur de fond sur le parent du label et de la checkbox quand celle-ci est cochée : .form-group:has(input:checked) { background: #ddd; } Démo sur Codepen Adapter les styles au nombre d’enfants Je souhaite adapter les styles et la taille des enfants selon leur nombre au sein de leur parent : .parent { &:has(> :nth-child(10)) { } &:has(> :nth-child(20)) { } &:has(> :nth-child(30)) { } } Démo sur Codepen Modifier les variables de la page au clic sur une checkbox À partir d’une case à cocher située n’importe où dans le DOM, je veux inverser les couleurs des variables de la page au moment où cette checkbox est cochée : ... n’importe où dans le DOM ... toggle light/dark body { --bg-color: #eee; --text-color: #222; background-color: var(--bg-color); color: var(--text-color); } body:has(.toggle:checked) { --bg-color: #222; --text-color: #eee; } Démo sur Codepen Bénéficier de Container Queries sans connaître le parent /* Je crée un Container Query sur le parent de .component (quel qu’il soit) */ :has(> .component) { container-type: inline-size; } /* J’adapte les styles de .component selon la taille du parent */ .component { @container (width > 500px) { color: hotpink; } } Démo sur Codepen Conclusion La portée et la puissance du sélecteur :has() dépassent de loin toutes les autres façons historiques de cibler les éléments en CSS. Grâce à :has() il est possible de cibler n’importe quel élément du DOM à partir de n’importe quel autre élément du DOM. On pourrait se poser des questions légitimes sur les performances d’un sélecteur permettant de parcourir tout le DOM dans tous les sens. Dans son article consacré à ce sélecteur, Jen Simmons explique que les travaux sur :has() ont conduit à des spécifications dédiées aux performances et que les navigateurs ont été retravaillés pour s’adapter à ces spécifications. Les résultats sont excellents (traduction d’un extrait de son article) : Il est enfin possible d’implémenter un tel sélecteur avec des performances fantastiques, même en présence de grands arbres DOM et d’un grand nombre de sélecteurs :has(). Ressources Documentation MDN : https://developer.mozilla.org/fr/docs/Web/CSS/:has Article de Jen Simmons (avec un paragraphe sur les performances) : https://webkit.org/blog/13096/css-has-pseudo-class/ Smashing Magazine : Level Up Your CSS Skills With The :has() Selector LogRocket : The advanced guide to the CSS :has() selector LambdaTest : Complete Guide to CSS :has() Selector Source de l’illustration principale : Pixabay : Ai généré, Darth vader, Star wars. Utilisation gratuite. Publié par Alsacreations.com">