# Selector CSS

## ¿Qué es un Selector CSS?

Para usar funciones como clic automático, inicio de sesión automático, plantilla de paginación, etc., se necesita un valor de Selector que especifique el elemento a hacer clic. Esta guía te muestra cómo obtener ese valor de Selector.

{% hint style="success" %}
**Un Selector CSS (selector) se refiere a los elementos** a los que se aplican las propiedades de estilo. Simplemente, un sitio web se compone básicamente de numerosas etiquetas, y puede entenderse como un valor específico asignado a cada elemento en la página web para aplicar diseño sobre el código. Cuando veas menciones del Selector CSS en las guías de Listly, puedes entenderlo como **el valor de código que tiene un elemento de selección específico (por ejemplo: botón, campo de entrada, etc.)**.
{% endhint %}

***

## Cómo usar

### A1. Obtener el valor del selector

{% stepper %}
{% step %}

### Obtener el Selector CSS usando PARTS

Puedes obtener el valor del Selector CSS de manera rápida y conveniente usando PARTS de Listly.

{% hint style="success" %}
**Clic en el icono de Listly** → Seleccionar **\[PARTS+]** → Hacer clic en el elemento deseado
{% endhint %}

A través de este proceso, puedes verificar inmediatamente el valor del Selector del elemento deseado en el panel lateral. Puedes copiar fácilmente ese valor haciendo clic en el **\[icono de copiar]** en el campo Selector CSS (selector).

<figure><img src="/files/cac16c28c6cda4f310815b2f90280cc3c5fa0cd8" alt=""><figcaption></figcaption></figure>

Después de copiar el valor, pégalo con Ctrl+V del teclado en el campo de configuración donde se necesita el valor del Selector.

<figure><img src="/files/ef37d0c709e68cf0c197408eb4a7b5a206118ccd" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Obtener el Selector CSS con las herramientas de desarrollador (Legacy)

(1) Haz clic derecho sobre el elemento, como un botón o campo de entrada, y selecciona **\[Inspeccionar]**.

<figure><img src="/files/ea9e9ada15d2860a72541969725db52834425368" alt=""><figcaption></figcaption></figure>

(2) Aparecerá una ventana de código en el lado derecho o inferior de la pantalla. El código correspondiente al elemento que acabas de seleccionar se mostrará en gris, y al pasar el mouse sobre el código, el área correspondiente se resaltará en color en la pantalla.

<figure><img src="/files/7bc3c73678a46cd4ff3fa02eb1e19e956beef967" alt=""><figcaption></figcaption></figure>

(3) Haz clic derecho sobre el código resaltado en gris y selecciona Copy -> Copy selector. Esto copiará el valor de ese selector.

<figure><img src="/files/f3b38e09ca75bf5fba8f419e2453efd16386a23f" alt=""><figcaption></figcaption></figure>

(4) Ve a la ventana de configuración y pega el valor que acabas de copiar con Ctrl+V del teclado o haciendo clic derecho y seleccionando 'pegar' donde se debe ingresar el valor del selector, y luego guarda.

<figure><img src="/files/2d5c898ad2a15c05c94ed0093928d3fa880731c7" alt=""><figcaption></figcaption></figure>
{% endstep %}
{% endstepper %}

### A2. Si ingresaste el Selector pero no funciona normalmente

En la mayoría de los sitios web, funciona normalmente si ingresas el valor del Selector obtenido en el paso 1. Sin embargo, si ingresaste el valor del Selector pero no obtienes los resultados deseados, consulta los siguientes métodos.

{% stepper %}
{% step %}

### Interferencia de programas de cambio de diseño

{% hint style="warning" %}
**Problema**: Puede que se haya copiado código CSS innecesario debido a programas de cambio de diseño del cursor del mouse, cambio de tema del navegador, extensiones de corrección de diseño, etc. Como CSS es código que controla el diseño de la página web, si tienes programas relacionados ejecutándose, apaga la configuración y vuelve a copiar el valor del Selector.
{% endhint %}
{% endstep %}

{% step %}

### Cuando la información requerida está incluida en etiquetas superiores/adyacentes

{% hint style="warning" %}
**Problema**: La información principal puede estar incluida en la etiqueta superior (elemento padre) en lugar del elemento que seleccionaste inicialmente.
{% endhint %}

{% hint style="success" %}
**Solución-1 (Al usar Parts)**: Haz clic en la **flecha hacia arriba (↑)** del elemento que seleccionaste inicialmente para ajustar el área de selección. Expande hasta **la caja más grande que no salga del área del botón** y usa ese valor.
{% endhint %}

<figure><img src="/files/44b04b88aa51f9c85fb364ff65b1eef1216ecc0c" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
**Solución-2 (Al usar herramientas de desarrollador)**: Al pasar el mouse sobre el código en las herramientas de desarrollador, el área del elemento correspondiente se resalta. En este caso, también selecciona **la caja más grande que no exceda el área del botón** y copia el valor del Selector CSS.
{% endhint %}

<figure><img src="/files/4fee6dbcef04c067b82e11883edea0c5a2f8111f" alt=""><figcaption></figcaption></figure>
{% endstep %}
{% endstepper %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.listly.io/docs/es/getting-started/extension-features/css-selector.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.