Navigation
Commencer
Bienvenue Tutoriel Complet Démarrage rapide / Aperçu
Guides
Installation Configuration Trouver des sélecteurs Exemples de code Dépannage
Avancé & Sécurité
Intégration & Paramètres de snippet Thématisation & Personnalisation Sécurité & Confidentialité

Comment trouver des sélecteurs CSS

Apprenez à identifier les sélecteurs CSS pour les zones de texte, les formulaires et les champs de saisie afin d'intégrer les assistants AI Anywhere dans votre site web.

Lecture de 15 min

Regardez cette vidéo tutorielle pour apprendre à trouver des sélecteurs CSS en utilisant les outils de développement du navigateur.

Les sélecteurs CSS sont des modèles utilisés pour sélectionner des éléments HTML sur votre page web. Lors de la création d'un assistant AI Anywhere, vous devez spécifier quelle zone de texte ou quel champ de formulaire l'assistant doit cibler en utilisant un sélecteur CSS.

Méthode 1 : Clic droit Inspecter l'élément (Recommandé)

La méthode la plus rapide et la plus simple pour trouver des sélecteurs sans ouvrir les outils de développement complets.

  1. Cliquez avec le bouton droit sur l'élément cible (zone de texte, champ de saisie, etc.)
  2. Sélectionnez "Inspecter l'élément" dans le menu contextuel
  3. Dans le panneau Éléments :
    • Cliquez avec le bouton droit sur l'élément surligné
    • Choisir Copier → Copier le sélecteur

Méthode 2 : Utilisation des outils de développement du navigateur

C'est la méthode la plus fiable pour trouver des sélecteurs sur n'importe quel site web.

  1. Ouvrir les outils de développement :
    • Chrome/Edge : Appuyez sur F12 ou Ctrl+Shift+I
    • Firefox : Appuyez sur F12 ou Ctrl+Shift+I
    • Safari : Appuyez sur Cmd+Option+I
  2. Sélectionnez l'élément :
    • Cliquez sur Éléments onglet dans les outils de développement
    • Cliquez sur Sélectionner l'élément outil (icône de curseur) en haut à gauche
    • Cliquez sur la zone de texte ou le champ de formulaire que vous souhaitez cibler
  3. Copier le sélecteur :
    • Cliquez avec le bouton droit sur l'élément surligné dans le panneau Éléments
    • Sélectionnez Copier → Copier le sélecteur
    • Collez ce sélecteur dans la configuration de votre assistant AI Anywhere
Exemple : If you select a textarea with id="comments", you'll get: #comments

Méthode 3 : Création manuelle de sélecteurs

Apprenez à créer des sélecteurs manuellement en comprenant la structure HTML.

Modèles de sélecteurs courants :

#element-id /* Cibler un élément par ID */ .class-name /* Cibler un élément par classe */ input[type="text"] /* Cibler des types d'entrée spécifiques */ textarea /* Cibler toutes les zones de texte */ form .field /* Cibler les éléments à l'intérieur des formulaires */

Exemples :

Par ID : #message cible <textarea id="message">
Par classe : .comment-box cible <textarea class="comment-box">
Par type : input[type="email"] cible les champs de saisie d'email
Par attribut : textarea[name="description"] cible la zone de texte avec name="description"

Exemples de sélecteurs courants

Zones de texte :

#comments /* Zone de texte avec id="comments" */ .message-box /* Zone de texte avec class="message-box" */ textarea[name="bio"] /* Zone de texte avec name="bio" */

Champs de saisie :

#email /* Champ de saisie avec id="email" */ input[type="text"] /* Tous les champs de texte */ .form-control /* Contrôles de formulaire Bootstrap */

Éléments de formulaire :

#contact-form textarea /* Zone de texte dans le formulaire de contact */ .comment-section input /* Champ de saisie dans la section des commentaires */ .editor textarea /* Zone de texte dans l'éditeur */

Sélecteurs spécifiques à WordPress

WordPress alimente plus de 40% de tous les sites web, voici donc les sélecteurs les plus courants que vous\

Sélecteurs du tableau de bord d'administration WordPress :

#content /* Éditeur de contenu principal (Gutenberg/Classique) */ .wp-editor-area /* Zone de texte de l'éditeur classique */ .block-editor-default-block-appender__content /* Éditeur de blocs Gutenberg */ .editor-post-title__input /* Champ du titre de l'article */

Formulaires de commentaires WordPress :

#comment /* Zone de texte principale des commentaires */ #respond textarea /* Zone de texte de commentaire dans la section des commentaires */ .comment-form textarea /* Zone de texte du formulaire de commentaire */ #commentform textarea /* Sélecteur de formulaire de commentaire alternatif */

Formulaires de contact WordPress (Contact Form 7, Gravity Forms, etc.) :

.wpcf7-textarea /* Zone de texte de Contact Form 7 */ .gform_wrapper textarea /* Zone de texte de Gravity Forms */ .wpforms-field-textarea /* Zone de texte de WPForms */

Constructeurs de pages WordPress :

/* Elementor */ .elementor-widget-text-editor textarea .elementor-text-editor /* Beaver Builder */ .fl-builder-content textarea /* Divi Builder */ .et_pb_text_inner textarea /* Blocs Gutenberg */ .wp-block-paragraph textarea

Sélecteurs spécifiques aux thèmes WordPress :

/* Thème Twenty Twenty-Four */ .wp-site-blocks textarea /* Thème Astra */ .ast-separate-container textarea /* Thème GeneratePress */ .inside-article textarea /* Thème OceanWP */ .content-area textarea
Astuce WordPress : De nombreux thèmes WordPress utilisent des sélecteurs génériques comme textarea ou input[type="text"]. Testez-les d'abord avant d'utiliser des sélecteurs plus spécifiques.
Avertissement WordPress : Les sites WordPress ont souvent plusieurs plugins qui peuvent modifier la structure HTML. Testez toujours vos sélecteurs après les mises à jour de thème ou de plugin.

Trouver les sélecteurs WordPress étape par étape :

  1. Identifiez l'élément WordPress :
    • Est-ce un éditeur de publication, un formulaire de commentaire ou un formulaire de contact ?
    • Êtes-vous dans le tableau de bord d'administration WordPress ou sur le frontend ?
    • Quel thème ou constructeur de page est utilisé ?
  2. Utilisez les outils de développement du navigateur :
    • Cliquez avec le bouton droit sur la zone de texte ou le champ de saisie
    • Sélectionnez "Inspecter l'élément"
    • Recherchez des classes ou ID spécifiques à WordPress
  3. Vérifiez les classes WordPress :
    • Recherchez des classes commençant par wp-, gutenberg-, ou editor-
    • Vérifiez les classes spécifiques au thème
    • Recherchez des classes spécifiques aux plugins (comme wpcf7- pour Contact Form 7)

Sélecteurs communs de plugins WordPress :

/* WooCommerce */ .woocommerce textarea #order_comments /* Yoast SEO */ #yoast_wpseo_metadesc #yoast_wpseo_focuskw /* Advanced Custom Fields */ .acf-field textarea /* Custom Post Type UI */ .cptui textarea /* WP All Import */ .wpallimport textarea

Considérations pour WordPress Multisite :

Astuce Multisite : Sur les installations multisite de WordPress, certains sélecteurs peuvent être différents pour les sous-domaines par rapport aux sous-répertoires. Testez sur le site spécifique que vous\

Tester vos sélecteurs

Testez toujours vos sélecteurs pour vous assurer qu'ils fonctionnent correctement.

  1. Ouvrir la console du navigateur :
    • Appuyez sur F12 pour ouvrir les outils de développement
    • Allez dans l'onglet Console onglet
  2. Tester le sélecteur :
    • Tapez : document.querySelector('your-selector-here')
    • Appuyez sur Entrée
    • Si cela renvoie l'élément, votre sélecteur fonctionne !
// Exemples de test : document.querySelector('#comments') // Devrait renvoyer l'élément textarea document.querySelector('.message-box') // Devrait renvoyer l'élément avec cette classe document.querySelector('textarea[name="bio"]') // Devrait renvoyer le textarea avec name="bio"

Conseils et meilleures pratiques

Astuce de pro : Utilisez des sélecteurs d'ID lorsque c'est possible - ils\
Meilleure pratique : Évitez les sélecteurs trop complexes. Les sélecteurs simples sont plus faciles à maintenir.
Avertissement : Si votre site utilise du contenu dynamique ou des frameworks JavaScript, les sélecteurs peuvent changer. Testez minutieusement !

Priorité des sélecteurs (du meilleur au pire) :

  1. Sélecteurs d'ID : #element-id (le plus fiable)
  2. Sélecteurs de classe : .class-name
  3. Sélecteurs d'attribut : input[type="text"]
  4. Sélecteurs de balise : textarea (le moins spécifique)

Dépannage des problèmes courants

Le sélecteur ne fonctionne pas ?

  • Vérifiez les fautes de frappe : Les sélecteurs sont sensibles à la casse
  • Vérifiez que l'élément existe : Utilisez la console du navigateur pour tester
  • Vérifiez le contenu dynamique : Certains éléments se chargent après le chargement de la page
  • Essayez un sélecteur plus simple : Utilisez un ID ou une classe au lieu de chemins complexes

Plusieurs éléments correspondent ?

  • Rendez le sélecteur plus spécifique : Ajoutez un élément parent ou un attribut unique
  • Utiliser nth-child : textarea:nth-child(2) pour la deuxième zone de texte
  • Ajouter un identifiant unique : Demander au développeur d'ajouter un ID à l'élément cible

Liste de vérification des sélecteurs

Before moving forward, make sure you've completed these steps:

✓ Sélecteur trouvé
✓ Testé
✓ Enregistré

Explication :

  • Sélecteur trouvé : You've identified a working CSS selector using one of the methods above
  • Testé : You've verified the selector works by testing it in your browser console
  • Enregistré : You've recorded the selector in your Helper configuration or saved it for later use

Prochaines étapes

Maintenant que vous savez comment trouver des sélecteurs, vous pouvez :