Cómo encontrar selectores CSS

Aprende cómo identificar selectores CSS para áreas de texto, formularios y campos de entrada para integrar los asistentes de AI Anywhere en tu sitio web.

Lectura de 15 min

Mira este video tutorial para aprender cómo encontrar selectores CSS usando las herramientas de desarrollo del navegador.

Los selectores CSS son patrones utilizados para seleccionar elementos HTML en tu página web. Al crear un asistente de AI Anywhere, necesitas especificar qué área de texto o campo de formulario debe ser el objetivo usando un selector CSS.

Método 1: Clic derecho Inspeccionar elemento (Recomendado)

El método más rápido y sencillo para encontrar selectores sin abrir todas las Herramientas de Desarrollador.

Haz clic derecho en el elemento objetivo (área de texto, campo de entrada, etc.)
Selecciona "Inspeccionar elemento" del menú contextual
En el panel de Elementos:
- Haz clic derecho en el elemento resaltado
- Elegir Copiar → Copiar selector

Método 2: Usar Herramientas de Desarrollador del Navegador

Este es el método más confiable para encontrar selectores en cualquier sitio web.

Abrir herramientas de desarrollo:
- Chrome/Edge: Presiona F12 o Ctrl+Shift+I
- Firefox: Presiona F12 o Ctrl+Shift+I
- Safari: Presiona Cmd+Option+I
Selecciona el elemento:
- Haz clic en el Elementos pestaña en herramientas de desarrollo
- Haz clic en el Seleccionar elemento herramienta (icono de cursor) en la parte superior izquierda
- Haz clic en el área de texto o campo de formulario que deseas seleccionar
Copiar el selector:
- Haz clic derecho en el elemento resaltado en el panel de Elementos
- Selecciona Copiar → Copiar selector
- Pega este selector en la configuración de tu asistente de AI Anywhere

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

Método 3: Creación Manual de Selectores

Aprende a crear selectores manualmente comprendiendo la estructura HTML.

Patrones Comunes de Selectores:

#element-id          /* Seleccionar elemento por ID */
.class-name          /* Seleccionar elemento por clase */
input[type="text"]   /* Seleccionar tipos de entrada específicos */
textarea             /* Seleccionar todos los textareas */
form .field          /* Seleccionar elementos dentro de formularios */
  

Ejemplos:

Por ID: #message objetivos <textarea id="message">
Por Clase: .comment-box objetivos <textarea class="comment-box">
Por Tipo: input[type="email"] selecciona campos de entrada de correo electrónico
Por Atributo: textarea[name="description"] selecciona textarea con name="description"

Ejemplos Comunes de Selectores

Áreas de Texto:

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

Campos de Entrada:

#email              /* Entrada con id="email" */
input[type="text"]  /* Todas las entradas de texto */
.form-control       /* Controles de formulario de Bootstrap */
  

Elementos de Formulario:

#contact-form textarea    /* Textarea dentro del formulario de contacto */
.comment-section input    /* Entrada dentro de la sección de comentarios */
.editor textarea          /* Textarea dentro del editor */
  

Selectores Específicos de WordPress

WordPress impulsa más del 40% de todos los sitios web, así que aquí están los selectores más comunes que\

Selectores del Panel de Administración de WordPress:

#content                    /* Editor de contenido principal (Gutenberg/Clásico) */
.wp-editor-area            /* Textarea del editor clásico */
.block-editor-default-block-appender__content  /* Editor de bloques de Gutenberg */
.editor-post-title__input   /* Campo de título de la publicación */
  

Formularios de Comentarios de WordPress:

#comment                   /* Textarea principal de comentarios */
#respond textarea          /* Área de texto de comentarios en la sección de comentarios */
.comment-form textarea     /* Área de texto del formulario de comentarios */
#commentform textarea      /* Selector de formulario de comentarios alternativo */
  

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

.wpcf7-textarea            /* Área de texto de Contact Form 7 */
.gform_wrapper textarea    /* Área de texto de Gravity Forms */
.wpforms-field-textarea    /* Área de texto de WPForms */
  

Constructores de páginas de WordPress:

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

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

/* Divi Builder */
.et_pb_text_inner textarea

/* Bloques de Gutenberg */
.wp-block-paragraph textarea
  

Selectores específicos de temas de WordPress:

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

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

/* Tema GeneratePress */
.inside-article textarea

/* Tema OceanWP */
.content-area textarea
  

Consejo de WordPress: Muchos temas de WordPress usan selectores genéricos como textarea o input[type="text"]. Prueba estos primero antes de usar selectores más específicos.

Advertencia de WordPress: Los sitios de WordPress a menudo tienen múltiples plugins que pueden cambiar la estructura HTML. Siempre prueba tus selectores después de actualizaciones de temas o plugins.

Encontrar selectores de WordPress paso a paso:

Identifica el elemento de WordPress:
- ¿Es un editor de publicaciones, formulario de comentarios o formulario de contacto?
- ¿Estás en el panel de administración de WordPress o en el frontend?
- ¿Qué tema o constructor de páginas se está utilizando?
Usa las herramientas de desarrollo del navegador:
- Haz clic derecho en el área de texto o campo de entrada
- Selecciona "Inspeccionar elemento"
- Busca clases o IDs específicos de WordPress
Verifica las clases de WordPress:
- Busca clases que comiencen con wp-, gutenberg-, o editor-
- Verifica las clases específicas del tema
- Busca clases específicas de plugins (como wpcf7- para Contact Form 7)

Selectores comunes de plugins de 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
  

Consideraciones para WordPress Multisite:

Consejo para Multisite: En instalaciones de WordPress multisite, algunos selectores pueden ser diferentes para subdominios frente a subdirectorios. Prueba en el sitio específico que\

Probando tus selectores

Siempre prueba tus selectores para asegurarte de que funcionen correctamente.

Abrir la consola del navegador:
- Presiona F12 para abrir las herramientas de desarrollo
- Ir a la Consola pestaña
Probar el selector:
- Escribe: document.querySelector('your-selector-here')
- Presiona Enter
- ¡Si devuelve el elemento, tu selector funciona!

// Ejemplos de prueba:
document.querySelector('#comments')        // Debería devolver el elemento textarea
document.querySelector('.message-box')    // Debería devolver el elemento con esa clase
document.querySelector('textarea[name="bio"]')  // Debería devolver textarea con name="bio"
  

Consejos y mejores prácticas

Consejo profesional: Usa selectores de ID cuando sea posible - ellos\

Mejor práctica: Evita selectores demasiado complejos. Los selectores simples son más fáciles de mantener.

Advertencia: Si tu sitio web utiliza contenido dinámico o frameworks de JavaScript, los selectores pueden cambiar. ¡Prueba a fondo!

Prioridad de selectores (de mejor a peor):

Selectores de ID: #element-id (más confiable)
Selectores de clase: .class-name
Selectores de atributo: input[type="text"]
Selectores de etiqueta: textarea (menos específico)

Solución de problemas comunes

¿El selector no funciona?

Revisa errores tipográficos: Los selectores distinguen entre mayúsculas y minúsculas
Verifica que el elemento exista: Usa la consola del navegador para probar
Revisa el contenido dinámico: Algunos elementos se cargan después de la carga de la página
Prueba un selector más simple: Usa ID o clase en lugar de rutas complejas

¿Coinciden múltiples elementos?

Haz el selector más específico: Añade un elemento padre o un atributo único
Usar nth-child: textarea:nth-child(2) para el segundo área de texto
Añadir identificador único: Pide al desarrollador que añada un ID al elemento objetivo

Lista de verificación de selectores

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

✓ Selector encontrado

✓ Probado

✓ Guardado

Explicación:

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

Próximos pasos

Ahora que sabes cómo encontrar selectores, puedes:

Navegación