# Guia de Notação de Seletores CSS e XPath Abaixo, listamos os tipos populares de seletores CSS e seus correspondentes seletores XPath. Observe que algumas versões desatualizadas dos navegadores podem não suportar certos tipos de seletores descritos abaixo. Além disso, não se esqueça de que todos os elementos de seletores listados abaixo podem ser facilmente combinados entre si dentro de um único seletor grande. ## 1. Valor do ID do elemento O identificador de um elemento em CSS é definido com **#**, e em XPath com **\[@id='example']**. Os identificadores devem ser únicos dentro da árvore DOM da página. Exemplos: CSS: `#example` XPath: `//div[@id='example']` ## 2. Nome da tag No exemplo anterior, usamos a notação **//div** na variante para XPath. Este é o nome da tag, por exemplo, **input** para um campo de texto ou botão, **img** para uma imagem ou **a** para um link. É possível selecionar um elemento simplesmente pelo nome de sua tag. Exemplos: CSS: `input` XPath: `//input` ## 3. Nome da classe No código HTML, os nomes das classes são escritos dentro do valor do atributo **class**, e, se houver várias classes no atributo, elas são separadas (ou, mais precisamente, combinadas) por um espaço. Mas nos seletores, os nomes das classes são indicados de forma um pouco diferente – em CSS, os nomes das classes são listados com um ponto, ou são separados por um ponto de outras partes do mesmo elemento seletor, por exemplo, do nome da tag. Em XPath, as classes são indicadas entre colchetes no atributo **@class**. Exemplos: CSS: `div.example` XPath: `//div[@class='example']` ## 4. Valor do atributo As tags HTML podem ter muitos atributos, e é possível encontrar tags simplesmente pelos nomes e valores desses atributos. Nos exemplos abaixo, encontraremos a tag **input** pelo atributo **name** e seu valor **"username"**: CSS: `input[name='username']` XPath: `//input[@name='username']` Também é possível buscar elementos pelos valores de vários atributos ao mesmo tempo. Exemplos: CSS: `input[name='login'][type='submit']` XPath: `//input[@name='login'and @type='submit']` ## 5. Valor parcial do atributo Se o valor do atributo pelo qual você deseja encontrar o elemento muda parcialmente durante a operação do site, você pode usar apenas a parte do valor que permanece inalterada. Essa possibilidade existe apenas nos seletores CSS: Busca de um elemento pelo prefixo do valor do atributo: CSS: `a[id^='id_prefix_']` Neste caso, encontraremos um hyperlink cujo atributo **ID** começa com **"id\_prefix\_"**. Busca de um elemento pelo sufixo do valor do atributo: CSS: `a[id$='_id_sufix']` Neste caso, encontraremos um hyperlink cujo atributo **ID** termina com **"\_id\_sufix"**. Busca de um elemento pela substring no valor do atributo: CSS: `a[id*='id_pattern']` Neste caso, encontraremos um hyperlink cujo atributo **ID** contém a substring **"id\_pattern"**. ## 6. Combinação de resultados de vários seletores No exemplo com o WhatsApp acima, todas as mensagens de saída podem ser encontradas com o seletor **div.message-out**, e todas as mensagens de entrada com o seletor **div.message-in**. E o que fazer se quisermos obter ou percorrer tanto as mensagens de entrada quanto as de saída em uma única lista, na ordem em que aparecem no chat? Em CSS, para esses casos, é fácil combinar listas de elementos obtidas por diferentes seletores usando uma vírgula. Em XPath, para esses mesmos fins, usa-se o símbolo de barra vertical. Exemplo: CSS: `div.message-out, div.message-in` XPath: `//div[@class=' message '] | //div[@class= 'message-in']` ## 7. Elemento filho direto As páginas HTML têm uma estrutura semelhante ao XML, com elementos filhos aninhados em elementos pais. Um elemento filho direto é definido em CSS com o símbolo >, e em XPath com o símbolo **/**. Exemplos: CSS: `div > a` XPath: `//div/a` ## 8. Elemento filho mais abaixo na hierarquia Descrever a cadeia de todos os elementos filhos diretos é, em primeiro lugar, cansativo, e em segundo lugar, leva a seletores não confiáveis. Se um elemento pode estar dentro de outro ou dentro de um de seus elementos filhos, ele é definido em CSS simplesmente com um espaço, e em XPath com **//**. Exemplos: CSS: `div a` XPath: `//div//a` ## 9. Próximo descendente Esse tipo de seletor é útil para percorrer elementos homogêneos no mesmo nível da hierarquia, como linhas de tabelas, elementos de listas numeradas ou não numeradas. O próximo descendente é o próximo elemento de uma lista homogênea de elementos no mesmo nível da hierarquia que o atual. Imagine que você tem dois tags **input** consecutivos em um formulário, assim: `
` `` Por algum motivo, você não pode se referir ao segundo **input** diretamente, mas você tem um seletor estável para o primeiro **input**. Nessa situação, para selecionar o segundo **input** em CSS, você precisará escrever assim: `#username + input` E em XPath assim: `//input[@id='username']/following-sibling:input[1]` ## 10. Pseudoclasses para elementos homogêneos Existem várias pseudoclasses que permitem selecionar o elemento desejado simplesmente pelo seu número ordinal no nível da hierarquia desejada (**nth-child**), ou pelo número ordinal e tipo do elemento (**nth-of-type**). O seletor abaixo selecionará a quarta tag **LI** no nível da hierarquia especificado: CSS: `li:nth-of-type(4)` Se quisermos selecionar a quarta tag, que é um descendente da tag **LI**, independentemente do tipo dessa tag, podemos fazer assim: CSS: `li:nth-child(4)` Em XPath, é possível indicar o elemento filho desejado em relação ao elemento atual simplesmente adicionando o número ordinal entre colchetes: `//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/pt/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.