# 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:

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

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 `id`s 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ô.


---

# 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/pt/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.