CodeGym /Cursos /Python SELF PT /Usando seletores CSS para encontrar elementos na página w...

Usando seletores CSS para encontrar elementos na página web

Python SELF PT
Nível 31 , Lição 4
Disponível

1. Relembrando os seletores CSS

Bem-vindo ao nosso mundo, onde páginas HTML revelam seus segredos, não com um estalo de dedos, mas com um seletor CSS certeiro. Se você acha que seletores CSS servem apenas para estilizar páginas (só pra deixar seu site com cara de algo profissional e não um caderno escolar rabiscado), então já tá mais do que na hora de abrir seu terceiro olho de scraper. Hoje vamos ver como os seletores CSS podem virar sua ferramenta favorita pra buscar e extrair dados.

Seletores CSS, na real, são tipo apelidos carinhosos que usamos pra chamar os elementos HTML. Eles ajudam a dizer quais elementos na página você quer mexer. Se a página HTML é um labirinto, os seletores CSS são como um fio vermelho que te ajuda a encontrar a saída.

Exemplos de seletores CSS

  • Tag: p — seleciona todos os elementos <p> (parágrafos).
  • Classe: .classname — seleciona todos os elementos com a classe especificada.
  • ID: #idname — seleciona o elemento com o ID específico.
  • Combinações: div > p — seleciona todos os <p> que são filhos diretos de <div>.

2. Usando seletores no BeautifulSoup

Adeus vida chata sem seletores CSS no BeautifulSoup! Bora atualizar nossos métodos. Imagina a cena: você acha um site e PRECISA pegar todas as citações dos grandes sábios pra impressionar numa entrevista. Pra isso, usamos o método select(), que trabalha diretamente com seletores CSS.

Métodos select() e select_one()

O método select() vai te devolver uma lista com todos os elementos que batem com seu seletor. Já o select_one() acha só o primeiro elemento que combina com o seletor — tipo um buscador que retorna exatamente o que você procurava, e não uma lista infinita de coisas inúteis.

Por exemplo, digamos que você tem uma página HTML com citações:

HTML

<div class="quote">
    <h2 class="author">Pushkin</h2>
    <p class="text">Ah, esse Pushkin.</p>
    <a href="https://example.com" class="link">Leia mais</a>
</div>
<div class="quote">
    <h2 class="author">Lenin</h2>
    <p class="text">Aprender, aprender e aprender mais.</p>
    <a href="https://example.com" class="link">Leia mais</a>
</div>
<div class="quote">
    <h2 class="author">Stalin</h2>
    <p class="text">Sem pessoas — sem problemas.</p>
    <a href="https://example.com" class="link">Leia mais</a>
</div>

E aqui está como podemos pegar essas citações:

Python

from bs4 import BeautifulSoup
import requests

# Pegando o código HTML da página
response = requests.get('http://quotes.toscrape.com/')
soup = BeautifulSoup(response.text, 'html.parser')

# Encontrando todas as citações usando seletores CSS
quotes = soup.select('.quote')

for quote in quotes:
    text = quote.select_one('.text').get_text()
    author = quote.select_one('.author').get_text()
    print(f'Citação: {text}\\nAutor: {author}\\n')

Não é quase mágica? A classe .quote nos ajuda a pegar todos os elementos marcados como citações, e .text e .author são elementos filhos de onde extraímos o texto da citação e do autor.

3. Exemplos de busca com seletores CSS

Bora praticar com alguns exemplos pro seu cérebro ficar afiado quando ver um div cheio de classes. Seletores podem ser usados pra buscas muito mais específicas em páginas. Você pode combiná-los pra obter exatamente o que precisa.

Seletor por classe e tag

Python

# Encontrando todos os links no bloco de menu
menu_links = soup.select('nav.menu a')

for link in menu_links:
    print(link['href'])

Seletor por ID

Python

# Pegando o título principal da página
main_heading = soup.select_one('#main-heading')
print(main_heading.text)

Combinando seletores

Python

# Encontrando todas as frases na seção destacada
highlighted_sentences = soup.select('.highlighted p')

for sentence in highlighted_sentences:
    print(sentence.text)

4. Erros e como evitá-los

Sua vida como scraper nem sempre vai ser fácil, tipo uma xícara de café sem açúcar. Existem situações onde seletores CSS não vão funcionar, por exemplo:

  • A página tem conteúdo dinâmico que muda e os elementos que você busca são carregados via JavaScript.
  • Você tenta usar um seletor que não existe (exemplo: escreveu errado a classe ou o ID).
  • A estrutura do HTML muda, resultando em um cenário de terror onde você não encontra os elementos que precisa.

Pra evitar esses deslizes, certifique-se de estar trabalhando com a versão estática e atualizada do documento HTML, e garanta que escreveu os seletores corretamente.

Aplicação prática

Agora você tem o poder de usar seletores CSS em projetos reais pra extrair dados. Essa habilidade vai ser útil pra criar ferramentas de análise de preços, coletar notícias e até monitorar mudanças em sites. O charme desse método é que, mesmo que o site mude seu visual com CSS, seu código continuará funcional, já que depende da estrutura HTML e não do design.

1
Tarefa
Python SELF PT, nível 31, lição 4
Bloqueado
Noções básicas de seletores CSS
Noções básicas de seletores CSS
2
Tarefa
Python SELF PT, nível 31, lição 4
Bloqueado
Extração de lista de elementos
Extração de lista de elementos
3
Tarefa
Python SELF PT, nível 31, lição 4
Bloqueado
Busca Complexa de Elementos HTML
Busca Complexa de Elementos HTML
4
Tarefa
Python SELF PT, nível 31, lição 4
Bloqueado
Projeto de um web scraper para análise de preços
Projeto de um web scraper para análise de preços
1
Pesquisa/teste
Introdução ao BeautifulSoup, nível 31, lição 4
Indisponível
Introdução ao BeautifulSoup
Introdução ao BeautifulSoup
Comentários
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION