Ça y est ! Le langage CSS (Cascading Style Sheet) qui code le style de vos pages web, permet enfin aux développeurs de sélectionner l’élément parent d’un élément enfant issu de votre DOM (Document Object Model). Je vous propose de vous présenter le sélecteur :has() en CSS.
CSS, DOM, :has() ?
Cela fait beaucoup d’acronymes d’un coup mais en gros, lorsque vous construisez votre page en HTML (HyperText Markup Language pour en ajouter encore un !), vous réalisez une certaine hiérarchie qu’on appelle le DOM. Cette hiérarchie s’impose d’elle-même notamment pour le SEO (Search Engine Optimization – promis, c’est le dernier) mais également dans le but de structurer son code et le contenu de communication que l’on affiche. Ces éléments sous forme de balises s’imbriquent ou se superposent.
Quoi qu’il en soit, il etait possible jusqu’alors, de cibler un élément imbriqué dans un autre, sans altérer la forme d’un autre élément du même type. Exemple, pour cibler un titre de 3ème niveau dans le footer, on pouvait le faire comme ceci avec le CSS:
footer h3 { color : red;}De cette façon, nous ciblons tous les titres de 3ème niveau dans le footer.
Ainsi, les autre titres de la page de 3ème niveau ne changeaient pas. En revanche, il n’était pas possible jusqu’en décembre 2023, de cibler le footer avec la condition qu’un élément de 3ème niveau (h3) y était placé. Or cela peut être très intéressant à plusieurs niveaux. Et c’est même une révolution pour ce langage et les webdesigners. Jusqu’à ce nouveau sélecteur « :has(); nous utilisions Javascript pour modifier l’ancêtre ou le parent. Voilà comment procéder :
/* théore : .parent :has(.enfant) | dans notre exemple : */
footer :has(h3) {background: #eee;}Avec ceci, si un titre de 3ème niveau est présent dans le footer, ce dernier aura un fond gris ! Pas mal non ? Voilà quelques exemples d’utilisations vite faits sur codepen :
Quelques exemples sue Codepen.io
Conclusion
Ce nouveau sélecteur va surtout être bénéfique pour les designers qui ne devront plus passer par le Javascript pour réaliser certaines conditions sur l’élément parent à cibler. En fait dans ce langage, c’est une véritable nouveauté et il faudra l’adopter et s’y adapter.
