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

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 !

Avantages	Inconvénients
Permet de cibler des éléments spécifiques en fonction de leur relation de proximité	La sélectivité peut parfois être complexe à gérer dans des structures HTML complexes
Facilite la mise en page et le style de certaines structures HTML	Une utilisation excessive peut rendre le code moins lisible
Améliore la modularité et la maintenabilité du code CSS	Une mauvaise utilisation peut entraîner des sélecteurs spécifiques difficiles à débuguer
Contribue à une mise en page plus flexible et réactive	Une compréhension approfondie de la structure HTML est nécessaire pour une utilisation efficace

      
   Maxime GUINARD | Développeur & Webdesigner WordPress indépendant
   148 avis Google 
  Écrire un avis 
  
 
 
   
 
 
        
   Myriam SRIKANTHA 
 2023-12-21
 
 
  Maxime GUIMARD a pris le temps de présenter son métier, auprès de mes classes de lycéen.  Présentation efficace, claire et compréhensible. Il a été à l’écoute des questions des lycéens.  Un grand merci à lui d’avoir pris le temps d’expliquer sa passion !
  
 
       
   Philippe BERTIEAUX 
 2023-10-01
 
 
  Maxime a une capacité que peu de SEO managers ont à ce jour ; celle de pouvoir s'adapter de manière extrêmement rapide et d'une manière particulièrement efficace, à toutes situations techniques inconfortables, mêmes les plus délicates. Le résultat est toujours au rendez-vous. Merci Maxime.
  
 
       
   Cuong Doan 
 2023-09-30
 
 
  J'ai travaillé avec Maxime sur un projet d'optimisation, où nous avons indexé les pages sur Google Search Console et effectué des corrections techniques en SEO. Il a réussi à résoudre tous les problèmes. Il est toujours disponible pour répondre à toutes les questions, très professionnel. C'était un plaisir de travailler avec lui ????????????.
  
 
       
   Artus Trézières 
 2023-09-30
 
 
  J'ai adoré travailler avec Maxime. Il est à l'écoute, gentil, et très compétent. De plus, il travaille extrêmement bien. Je le recommande vivement !
  
 
       
   Romain Knockaert 
 2023-09-01
 
 
  J'ai commandé auprès de Maxime une base pour un serveur Garry's Mod, n'ayant ni les compétences nécessaires ni le temps, il m'a aidé et m'a fourni une base propre avec des addons qu'il a fait lui-même pour un prix plus que raisonnable ! Grâce à lui j'ai pu gagner beaucoup de temps pour l'exécution de mon projet 🙂 je recommande !
  
 
       
   maha 
 2023-08-27
 
 
  Maxime GUINARD se distingue vraiment en tant que développeur web indépendant de haut calibre ! Sa maîtrise du développement WordPress et du design web est tout simplement impressionnante. Je suis extrêmement satisfaite de la qualité de son travail et je n'ai aucune hésitation à le recommander chaudement. Il mérite amplement toutes les étoiles possibles, soit 5 étoiles sans aucun doute !
  
 
       
   Nathou M 
 2023-05-24
 
 
  Super !
  
 
       
   Mario Mario 
 2023-05-24
 
 
  Super site web
  
 
       
   Mitsuko 
 2022-07-14
 
 
  Hello,  Maxime ma fait un super site web et aussi une carte en 3D ! J'ai passé 6 mois avec Maxime pour le tout. J'ai eu la chance de faire de superbes rencontres et de découvrir Maxime. Quelqu'un de dévouée et super bienveillant qui m'a permis de grandir et de m'accompagner tout au long de ma commande. Maxime est à l'écoute !
  
 
       
   M Mestchersky 
 2022-04-11
 
 
  Maxime is an excellent web developer and SEO consultant. Need any SEO advice? He is the one you're looking for.