Selecteur Proximite CSS

 

Sélecteur de Proximité en 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.

Maxime GUINARD
Maxime GUINARD

Merci d'avoir lu cet article. Je suis un développeur web WordPress passionné, et j'ai créé ce contenu avec soin pour vous offrir des informations de qualité. Restez connectés pour plus de conseils et d'astuces !

Facebook
Twitter
LinkedIn

Un projet en tête ?