How to Find CSS Selectors

Learn how to identify CSS selectors for text areas, forms, and input fields to integrate AI Anywhere helpers into your website.

15 min read

Watch this video tutorial to learn how to find CSS selectors using browser developer tools.

CSS selectors are patterns used to select HTML elements on your webpage. When creating an AI Anywhere helper, you need to specify which text area or form field the helper should target using a CSS selector.

Method 1: Right-Click Inspect Element (Recommended)

The quickest and simplest method for finding selectors without opening full Developer Tools.

Right-click on the target element (text area, input field, etc.)
Select "Inspect Element" from the context menu
In the Elements panel:
- Right-click on the highlighted element
- Choose Copy → Copy selector

Method 2: Using Browser Developer Tools

This is the most reliable method for finding selectors on any website.

Open Developer Tools:
- Chrome/Edge: Press F12 or Ctrl+Shift+I
- Firefox: Press F12 or Ctrl+Shift+I
- Safari: Press Cmd+Option+I
Select the Element:
- Click the Elements tab in Developer Tools
- Click the Select Element tool (cursor icon) in the top-left
- Click on the text area or form field you want to target
Copy the Selector:
- Right-click on the highlighted element in the Elements panel
- Select Copy → Copy selector
- Paste this selector into your AI Anywhere helper configuration

Example: If you select a textarea with id="comments", you'll get: #comments

Method 3: Manual Selector Creation

Learn to create selectors manually by understanding HTML structure.

Common Selector Patterns:

#element-id          /* Target element by ID */
.class-name          /* Target element by class */
input[type="text"]   /* Target specific input types */
textarea             /* Target all textareas */
form .field          /* Target elements inside forms */
  

Examples:

By ID: #message targets <textarea id="message">
By Class: .comment-box targets <textarea class="comment-box">
By Type: input[type="email"] targets email input fields
By Attribute: textarea[name="description"] targets textarea with name="description"

Common Selector Examples

Text Areas:

#comments           /* Textarea with id="comments" */
.message-box        /* Textarea with class="message-box" */
textarea[name="bio"] /* Textarea with name="bio" */
  

Input Fields:

#email              /* Input with id="email" */
input[type="text"]  /* All text inputs */
.form-control       /* Bootstrap form controls */
  

Form Elements:

#contact-form textarea    /* Textarea inside contact form */
.comment-section input    /* Input inside comment section */
.editor textarea          /* Textarea inside editor */
  

WordPress-Specific Selectors

WordPress powers over 40% of all websites, so here are the most common selectors you'll encounter on WordPress sites.

WordPress Admin Dashboard Selectors:

#content                    /* Main content editor (Gutenberg/Classic) */
.wp-editor-area            /* Classic editor textarea */
.block-editor-default-block-appender__content  /* Gutenberg block editor */
.editor-post-title__input   /* Post title field */
  

WordPress Comment Forms:

#comment                   /* Main comment textarea */
#respond textarea          /* Comment textarea in comment section */
.comment-form textarea     /* Comment form textarea */
#commentform textarea      /* Alternative comment form selector */
  

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

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

WordPress Page Builders:

/* Elementor */
.elementor-widget-text-editor textarea
.elementor-text-editor

/* Beaver Builder */
.fl-builder-content textarea

/* Divi Builder */
.et_pb_text_inner textarea

/* Gutenberg Blocks */
.wp-block-paragraph textarea
  

WordPress Theme-Specific Selectors:

/* Twenty Twenty-Four Theme */
.wp-site-blocks textarea

/* Astra Theme */
.ast-separate-container textarea

/* GeneratePress Theme */
.inside-article textarea

/* OceanWP Theme */
.content-area textarea
  

WordPress Tip: Many WordPress themes use generic selectors like textarea or input[type="text"]. Test these first before using more specific selectors.

WordPress Warning: WordPress sites often have multiple plugins that can change the HTML structure. Always test your selectors after theme or plugin updates.

Finding WordPress Selectors Step-by-Step:

Identify the WordPress Element:
- Is it a post editor, comment form, or contact form?
- Are you in the WordPress admin dashboard or on the frontend?
- What theme or page builder is being used?
Use Browser Developer Tools:
- Right-click on the text area or input field
- Select "Inspect Element"
- Look for WordPress-specific classes or IDs
Check for WordPress Classes:
- Look for classes starting with wp-, gutenberg-, or editor-
- Check for theme-specific classes
- Look for plugin-specific classes (like wpcf7- for Contact Form 7)

Common WordPress Plugin Selectors:

/* 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
  

WordPress Multisite Considerations:

Multisite Tip: On WordPress multisite installations, some selectors might be different for subdomains vs subdirectories. Test on the specific site you're targeting.

Testing Your Selectors

Always test your selectors to ensure they work correctly.

Open Browser Console:
- Press F12 to open Developer Tools
- Go to the Console tab
Test the Selector:
- Type: document.querySelector('your-selector-here')
- Press Enter
- If it returns the element, your selector works!

// Test examples:
document.querySelector('#comments')        // Should return textarea element
document.querySelector('.message-box')    // Should return element with that class
document.querySelector('textarea[name="bio"]')  // Should return textarea with name="bio"
  

Tips and Best Practices

Pro Tip: Use ID selectors when possible - they're the most specific and reliable.

Best Practice: Avoid overly complex selectors. Simple selectors are easier to maintain.

Warning: If your website uses dynamic content or JavaScript frameworks, selectors might change. Test thoroughly!

Selector Priority (Best to Worst):

ID selectors: #element-id (most reliable)
Class selectors: .class-name
Attribute selectors: input[type="text"]
Tag selectors: textarea (least specific)

Troubleshooting Common Issues

Selector Not Working?

Check for typos: Selectors are case-sensitive
Verify element exists: Use browser console to test
Check for dynamic content: Some elements load after page load
Try a simpler selector: Use ID or class instead of complex paths

Multiple Elements Match?

Make selector more specific: Add parent element or unique attribute
Use nth-child: textarea:nth-child(2) for second textarea
Add unique identifier: Ask developer to add ID to target element

Selector Checklist

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

✓ Selector found

✓ Tested

✓ Saved

Explanation:

Selector found: You've identified a working CSS selector using one of the methods above
Tested: You've verified the selector works by testing it in your browser console
Saved: You've recorded the selector in your Helper configuration or saved it for later use

Next Steps

Now that you know how to find selectors, you can:

Navigation