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:

<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 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]