# Notación de selectores CSS con ejemplos

Veamos un selector largo de WhatsApp que escribimos anteriormente:

`#main > footer > div._2lSWV._3cjY2.copyable-area > div > span:nth-child(2) > div > div._1VZX7 > div._2xy_p._3XKXx > button`

Y de inmediato observemos la sección de código en la propia página web que corresponde a este elemento:

<figure><img src="https://3940823687-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8QfFNyYLPzoIrRZpZokA%2Fuploads%2Fgit-blob-ad8ab6cb9a7c40b63967eb3e79ea41bd61d0e1b5%2F1%20(5).png?alt=media" alt=""><figcaption></figcaption></figure>

Para su conveniencia, hemos subrayado en rojo todas las secciones de código e identificadores que forman parte de este selector, para que pueda relacionarlos en el selector y en el código HTML de la página. Comencemos a rastrear el selector desde el principio y bajemos por la jerarquía de etiquetas anidadas de la página web hasta el elemento de control que necesitamos. La notación `#main` significa que debemos encontrar un elemento cuyo atributo `id` tenga el valor `main`. A diferencia de los nombres de clase, que pueden repetirse muchas veces, los `id` de los elementos aparecen en la página solo una vez. En este caso, esta notación nos encontró la etiqueta `<div id="main">`, donde la etiqueta `div` o su clase no jugaron ningún papel. El símbolo `>` significa que debemos descender por la jerarquía, a los elementos hijos de la etiqueta encontrada, y buscar la siguiente parte del selector entre ellos.

A continuación, sigue el nombre de la etiqueta `footer`, aquí encontramos la etiqueta correspondiente simplemente por su nombre, sin ninguna aclaración adicional. Luego vemos otro símbolo `>`, lo que significa que bajamos aún más en la jerarquía de elementos. La siguiente notación `div._2lSWV._3cjY2.copyable-area` significa que debemos encontrar la etiqueta `div`, entre cuyas clases deben estar simultáneamente `_2lSWV`, `_3cjY2` y `copyable-area`. Puede haber más clases en el elemento buscado, solo indicamos el mínimo necesario que necesitamos. Así, encontramos la etiqueta `<div class="_2lSWV _3cjY2 copyable-area">`, que se ajusta a este selector. Tenga en cuenta que en el selector los nombres de las clases están conectados por un punto (que en este caso significa el operador lógico `Y`), mientras que en el texto del atributo `class`, en la propia etiqueta, estos mismos nombres de clase están enumerados por espacios: esta es una diferencia importante en la notación de los nombres de clase en los atributos de las etiquetas y en los selectores.

Descendemos aún más, encontramos el siguiente elemento simplemente por el nombre de la etiqueta `div`. Dado que hay muchas etiquetas `div` en este nivel de jerarquía, se tomará la primera que se encuentre. Descendemos aún más, la notación `span:nth-child(2)` nos indica que debemos encontrar la etiqueta `span`, y luego ir al segundo elemento hijo de esta etiqueta. Luego encontramos nuevamente el elemento `div` simplemente por el nombre del elemento. Luego encontramos la etiqueta `<div class="_1VZX7">` que corresponde al selector `div._1VZX7` – por el nombre de la etiqueta y el nombre de la clase en esta etiqueta. Luego encontramos el elemento `<div class="_2xy_p _3XKXx">` por el selector `div._2xy_p._3XKXx`, y al final encontramos la etiqueta hija `button` simplemente por el nombre de la etiqueta. Esta fue una cadena bastante larga, y en este camino muchas cosas pueden salir mal si el sitio se actualiza. Sin embargo, en este ejemplo hemos visto qué diferentes variantes de notación se utilizan en los selectores CSS.

Compare con el selector corto `button[aria-label="Enviar"]`, que destaca el mismo elemento de control, y que propusimos como alternativa. ¿Por qué compusimos manualmente exactamente ese selector? Primero miramos la etiqueta final que necesitamos:

`<button data-tab="11" aria-label="Enviar" class="tvf2evcx oq44ahr5 lb5m6g5c svlsagor p2rjqpw5 epia9gcq">`

Los nombres de las clases no nos gustan de inmediato: hay muchos, y parecen combinaciones aleatorias de letras y números, lo que significa que en una nueva versión de la página web casi seguramente cambiarán. El nombre de la etiqueta `button` parece prometedor. No hay tantas botones en esta página. Sin embargo, el nombre `button` por sí solo puede no ser único: puede haber otros botones en la página. Por supuesto, podemos usar un modificador como `button:nth-child(1)`, que nos indicará el número exacto de orden de un elemento similar en la página. O lo mismo se puede hacer ingresando el número `1` en la columna Índice a la derecha de la columna CSS en la ventana del editor de selectores de Sherpa RPA – esto dará el mismo efecto.

Pero ¿quién garantiza que en la próxima actualización de la página no cambie el orden o la cantidad de botones en la página? El texto "Enviar" en el atributo `aria-label` parece bastante único: es el texto que será reemplazado por el elemento de control en "lectores de pantalla" y otras herramientas de accesibilidad para personas con discapacidades. Es muy poco probable que los desarrolladores del sitio cambien este nombre en las próximas versiones de la aplicación web, por lo que tomaremos esto como un atributo distintivo característico. Para indicar que solo necesitamos esa etiqueta `button` cuyo atributo `aria-label` tenga el valor "Enviar", usamos corchetes: `button[aria-label="Enviar"]`. Hemos obtenido un selector bastante confiable que no es vergonzoso usar en la producción de nuestro Robot.


---

# 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://docs.sherparpa.ru/es/sherpa-rpa/sherpa-designer/rabota-v-sherpa-designer/rukovodstvo-po-veb-selektoram/notaciya-css-selektorov-na-primerakh.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.