Notação de seletores CSS com exemplos#

Vamos considerar um seletor longo do WhatsApp, que escrevemos acima:

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

E logo em seguida, vamos olhar para a parte do código na própria página da web que corresponde a esse elemento:

Para sua conveniência, sublinhamos em vermelho todas as partes do código e identificadores que fazem parte desse seletor, para que você possa mapeá-los no seletor e no código HTML da página. Vamos começar a rastrear o seletor desde o início e descer pela hierarquia de tags aninhadas da página da web até o elemento de controle que precisamos. A notação #main significa que precisamos encontrar um elemento cujo atributo id tenha o valor main. Ao contrário dos nomes de classes, que podem se repetir muitas vezes, os ids dos elementos aparecem na página apenas uma vez. Neste caso, essa notação nos encontrou a tag <div id="main">, onde a própria tag div ou sua classe não desempenharam nenhum papel. O símbolo > significa que devemos descer pela hierarquia, para os elementos filhos da tag encontrada, e procurar a parte seguinte do seletor entre eles.

Em seguida, temos o nome da tag footer, aqui encontramos a tag correspondente apenas pelo seu nome, sem quaisquer esclarecimentos adicionais. Em seguida, vemos mais um símbolo >, o que significa que descemos ainda mais na hierarquia dos elementos. A próxima notação div._2lSWV._3cjY2.copyable-area significa que devemos encontrar a tag div, entre cujas classes devem estar simultaneamente _2lSWV, _3cjY2 e copyable-area. O elemento que estamos buscando pode ter mais classes, mas indicamos apenas o mínimo necessário. Assim, encontramos a tag <div class="_2lSWV _3cjY2 copyable-area">, que se encaixa nesse seletor. Note que no seletor os nomes das classes estão conectados por um ponto (que neste caso significa o operador lógico E), enquanto no texto do atributo class, na própria tag, esses mesmos nomes de classes estão listados por espaço – essa é uma diferença importante na notação dos nomes das classes nos atributos das tags e nos seletores.

Descemos ainda mais, encontramos o próximo elemento apenas pelo nome da tag div. Como há muitas tags div neste nível da hierarquia, será escolhida a primeira que aparecer. Descemos mais uma vez, a notação span:nth-child(2) nos diz que devemos encontrar a tag span, e depois ir para o segundo elemento filho dessa tag. Em seguida, encontramos novamente o elemento div apenas pelo nome do elemento. Depois encontramos a tag <div class="_1VZX7"> que corresponde ao seletor div._1VZX7 – pelo nome da tag e pelo nome da classe nessa tag. Em seguida, encontramos o elemento <div class="_2xy_p _3XKXx"> pelo seletor div._2xy_p._3XKXx, e por fim encontramos a tag filha button apenas pelo nome da própria tag. Essa foi uma cadeia bastante longa, e ao longo desse caminho muitas coisas podem dar errado se o site for atualizado. No entanto, neste exemplo, vimos quais diferentes variantes de notação são usadas nos seletores CSS.

Compare com o seletor curto button[aria-label="Enviar"], que destaca o mesmo elemento de controle, e que sugerimos como alternativa. Por que montamos manualmente exatamente esse seletor? Primeiro, olhamos para a tag final que precisamos:

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

Os nomes das classes não nos agradam – são muitos, e parecem combinações aleatórias de letras e números, o que significa que na nova versão da página da web eles quase certamente mudarão. O nome da tag button parece promissor. Não há muitas botões nesta página. Mas, no entanto, o próprio nome button pode não ser único – pode haver outros botões na página. Claro que podemos usar um modificador como button:nth-child(1), que nos indicará o número exato de ordem de um elemento do mesmo tipo na página. Ou a mesma coisa pode ser feita, inserindo o número 1 na coluna Index à direita da coluna CSS na janela do editor de seletores do Sherpa RPA – isso dará o mesmo efeito.

Mas quem pode garantir que na próxima atualização da página a ordem ou a quantidade de botões na página não mudará? O texto "Enviar" no atributo aria-label parece suficientemente único – é o texto que será substituído pelo elemento de controle em "leitores de tela" e outras ferramentas de acessibilidade para pessoas com deficiência. É muito improvável que os desenvolvedores do site mudem esse nome nas próximas versões do aplicativo web, portanto, é isso que usaremos como atributo distintivo característico. Para indicar que precisamos apenas dessa tag button, cujo atributo aria-label tem o valor "Enviar", usamos colchetes - button[aria-label="Enviar"]. Obtivemos um seletor bastante confiável, que não é vergonhoso usar na produção do nosso Robô.