Selecteur Proximite CSS

Comprendre le Rôle du Sélecteur de Proximité

Le sélecteur de proximité, représenté par le signe ~, permet de cibler les éléments qui suivent un autre élément, qu’ils soient proches ou distants, mais pas précédents.

Note : Les éléments suivants doivent être au même niveau hiérarchique que l’élément précédent, et non à l’intérieur de celui-ci.

Par exemple, les deux paragraphes qui suivent un titre h1 seront colorés en rouge grâce au code CSS ci-dessous :

h1~p{     color: red; }

Essayez le Sélecteur de Proximité

Vous pouvez tester vous-même ce sélecteur en utilisant Codepen.

Code CSS :

h1~p{     color: red; }

Code HTML :

<p>Au cœur du développement web se trouvent les langages de programmation. </p> <h1>Titre</h1> <p>Des langages comme HTML, CSS et JavaScript sont essentiels pour créer des pages web interactives et esthétiquement agréables.</p> <h2>Sous-titre</h2> <p>Les frameworks tels que React, Angular et Vue.js simplifient le développement d'applications web plus avancées.</p>

Résultat :

Compatibilité des Navigateurs

Le sélecteur de proximité est pris en charge par tous les principaux navigateurs, y compris Chrome, Firefox, Internet Explorer, Safari et Opera.