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í:
<input type = "text" class = "form-control" id = "username" name = "username" placeholder = "username" required autofocus></br>
<input type = "password" class = "form-control" id = "password" name = "password" placeholder = "password" required>
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]