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:

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.