# Guía de notación de selectores CSS y XPath
A continuación, enumeraremos los tipos populares de selectores CSS y sus correspondientes selectores XPath. Tenga en cuenta que algunas versiones obsoletas de navegadores pueden no soportar ciertos tipos de selectores descritos a continuación. Además, no olvide que todos los elementos de selectores enumerados a continuación se pueden combinar fácilmente entre sí dentro de un solo gran selector.
## 1. Valor del ID del elemento
El identificador de un elemento en CSS se define con **#**, y en XPath con **\[@id='example']**. Los identificadores deben ser únicos dentro del árbol DOM de la página.
Ejemplos:
CSS: `#example`
XPath: `//div[@id='example']`
## 2. Nombre de la etiqueta
En el ejemplo anterior, utilizamos la notación **//div** en la variante de XPath. Este es el nombre de la etiqueta, por ejemplo, **input** para un campo de texto o botón, **img** para una imagen o **a** para un enlace. Se puede seleccionar un elemento simplemente por el nombre de su etiqueta.
Ejemplos:
CSS: `input`
XPath: `//input`
## 3. Nombre de la clase
En el código HTML, los nombres de las clases se escriben dentro del valor del atributo **class**, y si hay varias clases en el atributo, se separan (o, más precisamente, se combinan) con un espacio. Pero en los selectores, los nombres de las clases se indican de manera un poco diferente: en CSS, los nombres de las clases se enumeran con un punto, o se separan con un punto de otras partes del mismo elemento selector, por ejemplo, del nombre de la etiqueta. En XPath, las clases se indican entre corchetes en el atributo **@class**.
Ejemplos:
CSS: `div.example`
XPath: `//div[@class='example']`
## 4. Valor del atributo
Las etiquetas HTML pueden tener múltiples atributos, y se pueden encontrar etiquetas simplemente por los nombres y valores de esos atributos. En los ejemplos a continuación, encontraremos la etiqueta **input** por el atributo **name** y su valor **«username»**:
CSS: `input[name='username']`
XPath: `//input[@name='username']`
También hay la posibilidad de buscar elementos por los valores de varios atributos a la vez. Ejemplos:
CSS: `input[name='login'][type='submit']`
XPath: `//input[@name='login'and @type='submit']`
## 5. Valor parcial del atributo
Si el valor del atributo con el que desea encontrar el elemento cambia parcialmente durante el funcionamiento del sitio, puede usar solo la parte del valor que permanece inalterada para la búsqueda. Esta posibilidad solo existe en los selectores CSS:
Búsqueda de un elemento por el prefijo del valor del atributo:
CSS: `a[id^='id_prefix_']`
En este caso, encontraremos un hipervínculo cuyo atributo **ID** comienza con **«id\_prefix\_»**. Búsqueda de un elemento por el sufijo del valor del atributo:
CSS: `a[id$='_id_sufix']`
En este caso, encontraremos un hipervínculo cuyo atributo **ID** termina con **«\_id\_sufix»**. Búsqueda de un elemento por una subcadena en el valor del atributo:
CSS: `a[id*='id_pattern']`
En este caso, encontraremos un hipervínculo cuyo atributo **ID** contiene la subcadena **«id\_pattern»**.
## 6. Combinación de resultados de varios selectores
En el ejemplo de WhatsApp anterior, todos los mensajes salientes se pueden encontrar con el selector **div.message-out**, y todos los mensajes entrantes con el selector **div.message-in**. ¿Y qué hacer si queremos obtener o recorrer tanto los mensajes entrantes como los salientes en un solo listado, en el orden en que aparecen en el chat? En CSS, para estos casos, se pueden combinar fácilmente las listas de elementos obtenidas de diferentes selectores con una coma. En XPath, para estos mismos fines, se utiliza el símbolo de barra vertical.
Ejemplo:
CSS: `div.message-out, div.message-in`
XPath: `//div[@class=' message '] | //div[@class= 'message-in']`
## 7. Elemento hijo directo
Las páginas HTML tienen una estructura similar a XML, con elementos hijos anidados dentro de padres. Un elemento hijo directo se define en CSS con el símbolo >, y en XPath con el símbolo **/**.
Ejemplos:
CSS: `div > a`
XPath: `//div/a`
## 8. Elemento hijo más abajo en la jerarquía
Describir la cadena de todos los elementos hijos directos es, en primer lugar, tedioso, y en segundo lugar, conduce a selectores poco confiables. Si un elemento puede estar dentro de otro o dentro de uno de sus elementos hijos, se define en CSS simplemente con un espacio, y en XPath con **//**.
Ejemplos:
CSS: `div a`
XPath: `//div//a`
## 9. Siguiente hermano
Este tipo de selector es útil para recorrer elementos homogéneos en el mismo nivel de jerarquía, como filas de tablas, elementos de listas numeradas o no numeradas. El siguiente hermano es el siguiente elemento de una lista homogénea de elementos en el mismo nivel de jerarquía que el actual.
Imagina que tienes dos etiquetas **input** consecutivas en un formulario, así:
``
``
Por alguna razón, no puedes dirigirte al segundo **input** directamente, pero tienes un selector estable para el primer **input**. En tal situación, para seleccionar el segundo **input** en CSS, necesitarás escribir así:
`#username + input`
Y en XPath así:
`//input[@id='username']/following-sibling:input[1]`
## 10. Pseudoclases para elementos homogéneos
Existen varias pseudoclases que permiten seleccionar el elemento deseado simplemente por su número ordinal en el nivel de jerarquía requerido (**nth-child**), o por el número ordinal y tipo de elemento (**nth-of-type**).
El selector a continuación seleccionará la cuarta etiqueta **LI** en el nivel de jerarquía especificado:
CSS: `li:nth-of-type(4)`
Si queremos seleccionar la cuarta etiqueta, que es un descendiente de la etiqueta **LI**, sin importar el tipo de esta etiqueta, se puede hacer así:
CSS: `li:nth-child(4)`
En XPath, hay la posibilidad de indicar el hijo correspondiente en relación al elemento actual simplemente añadiendo el número ordinal entre corchetes:
`//li[4]`
---
# 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/spravochnik-po-notacii-css-i-xpath-selektorov.md?ask=
```
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.