0Pricing
R Academy · Aula

Estrutura HTML e seletores CSS

Entenda árvores DOM e escreva seletores CSS para direcionar elementos.

Estrutura HTML e seletores CSS é uma aula grátis de R Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de R Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de R Academy inclui 4 aulas no total.

A árvore DOM do HTML

Toda página da Web é estruturada como uma árvore do Modelo de Objetos do Documento (DOM). Os elementos HTML ficam aninhados uns nos outros, formando uma hierarquia de elementos pai e filho. A extração de dados da Web navega por essa árvore para extrair informações.

# HTML structure conceptually:
# <html>
#   <body>
#     <div class='container'>
#       <h1 id='title'>Hello</h1>
#       <p class='text'>World</p>
#     </div>
#   </body>
# </html>

# rvest lets us query this tree with CSS selectors
library(rvest)
html <- read_html('<div><h1>Title</h1><p class="info">Text</p></div>')
html_text(html_element(html, 'h1'))

Seletor CSS: seletor de tag

O seletor CSS mais simples direciona-se aos elementos pelo nome da tag. Escrever p seleciona todos os elementos de parágrafo. Escrever h1 seleciona todos os cabeçalhos de nível 1.

library(rvest)
html <- read_html('
  <div>
    <p>First paragraph</p>
    <p>Second paragraph</p>
    <h2>A heading</h2>
  </div>
')
# Tag selector: selects all <p> elements
nodes <- html_elements(html, 'p')
html_text2(nodes)
# Returns: c('First paragraph', 'Second paragraph')

Seletor CSS: classe e ID

Use .classname para selecionar elementos por classe e #idname para selecionar um elemento exclusivo por ID. As classes podem aparecer várias vezes; os IDs devem ser exclusivos na página.

library(rvest)
html <- read_html('
  <div>
    <p class="highlight">Important text</p>
    <p class="normal">Regular text</p>
    <span id="price">$9.99</span>
  </div>
')
# Class selector (prefix with .)
html_text2(html_element(html, '.highlight'))
# ID selector (prefix with #)
html_text2(html_element(html, '#price'))

Seletores de descendentes e filhos

div p seleciona qualquer p dentro de uma div (em qualquer nível). div > p seleciona apenas os filhos diretos. h1 + p seleciona um p que vem imediatamente depois de um h1 (irmão adjacente).

library(rvest)
html <- read_html('
  <div class="outer">
    <p>Direct child</p>
    <section>
      <p>Nested deeper</p>
    </section>
  </div>
')
# Descendant: both paragraphs
all_p <- html_elements(html, 'div p')
length(all_p)  # 2

# Direct child only
direct_p <- html_elements(html, 'div.outer > p')
length(direct_p)  # 1

Seletores de atributos

Os seletores de atributos CSS permitem filtrar por atributos HTML: [attr] verifica a existência, [attr='val'] verifica o valor exato e [attr*='val'] verifica se o valor contém uma substring.

library(rvest)
html <- read_html('
  <div>
    <a href="https://example.com">External</a>
    <a href="/about">Internal</a>
    <a>No href</a>
  </div>
')
# Select only anchors that have an href attribute
with_href <- html_elements(html, 'a[href]')
length(with_href)  # 2

# Select anchors with href starting with https
external <- html_elements(html, 'a[href^="https"]')
html_text2(external)  # 'External'

Noções básicas de XPath

XPath é uma alternativa aos seletores CSS, mais poderosa para consultas complexas. No rvest, use html_element(html, xpath='//tag'). //p significa qualquer p em qualquer lugar; /html/body/p é um caminho absoluto.

library(rvest)
html <- read_html('
  <html><body>
    <table>
      <tr><td class="price">10.99</td></tr>
      <tr><td class="price">5.50</td></tr>
    </table>
  </body></html>
')
# XPath: select all td with class price
nodes <- html_elements(html, xpath = '//td[@class="price"]')
html_text2(nodes)
# c('10.99', '5.50')

# XPath text() function
nodes2 <- html_elements(html, xpath = '//td[contains(@class,"price")]')
html_text2(nodes2)

Combinando seletores

Os seletores podem ser combinados para obter mais precisão. div.card h2 seleciona h2 dentro de uma div com a classe card. Uma vírgula separa vários seletores independentes: h1, h2, h3 seleciona os três níveis de cabeçalho.

library(rvest)
html <- read_html('
  <div class="card">
    <h2>Card Title</h2>
    <p class="desc">Description here</p>
    <span class="price">$19</span>
  </div>
  <div class="footer">
    <h2>Footer Heading</h2>
  </div>
')
# Only h2 inside .card
card_h2 <- html_element(html, 'div.card h2')
html_text2(card_h2)  # 'Card Title'

# Multiple selectors with comma
price_desc <- html_elements(html, '.price, .desc')
html_text2(price_desc)

Ferramenta SelectorGadget

SelectorGadget é um bookmarklet do navegador que ajuda você a encontrar seletores CSS de forma interativa. Clique nos elementos desejados (destacados em verde) e nos elementos indesejados (destacados em vermelho) — ele gera automaticamente o seletor CSS mínimo.

# SelectorGadget workflow:
# 1. Open target page in Chrome/Firefox
# 2. Activate SelectorGadget bookmarklet
# 3. Click element you want -> turns green, selector appears
# 4. Click elements you DON'T want -> turns red, selector narrows
# 5. Copy the selector shown at the bottom
# 6. Use in rvest:

library(rvest)
# Example: SelectorGadget found '.product-title' for us
# page <- read_html('https://books.toscrape.com')
# titles <- html_elements(page, '.product_pod h3 a')
# html_text2(titles)
cat('SelectorGadget is available at selectorgadget.com')

Inspecionando páginas no DevTools

O DevTools do navegador (F12) permite inspecionar o DOM diretamente. Clique com o botão direito em qualquer elemento, escolha Inspecionar, e o painel Elementos exibirá o HTML. Passar o cursor destaca os elementos na página, ajudando você a identificar a tag, a classe e o ID exatos a serem direcionados.

# DevTools workflow for finding selectors:
# 1. F12 -> Elements tab
# 2. Click the cursor icon (Inspector)
# 3. Click the element on the page
# 4. Right-click highlighted HTML -> Copy -> Copy selector
# 5. Paste selector into rvest

# The copied selector might look like:
# '#main > div.results > article:nth-child(1) > h3'
# Simplify it: usually '.results h3' works just as well

# Validate your selector in the Console with:
# document.querySelectorAll('.results h3')
library(rvest)
cat('Always verify selectors return the elements you expect')

Pseudo-classes e nth-child

As pseudo-classes CSS, como :first-child, :last-child e :nth-child(n), permitem selecionar elementos com base em sua posição dentro do elemento pai — algo útil quando os elementos não têm classes que os diferenciem.

library(rvest)
html <- read_html('
  <ul>
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
    <li>Fourth</li>
  </ul>
')
# First item
first <- html_element(html, 'li:first-child')
html_text2(first)  # 'First'

# Third item
third <- html_element(html, 'li:nth-child(3)')
html_text2(third)  # 'Third'

# Even items
evens <- html_elements(html, 'li:nth-child(even)')
html_text2(evens)  # c('Second', 'Fourth')

Regras de especificidade dos seletores

Quando vários seletores podem corresponder, a especificidade determina qual deles vence. Os IDs têm precedência sobre as classes; as classes têm precedência sobre as tags. Na extração de dados, isso é menos importante — mas conhecer a especificidade ajuda você a escrever seletores precisos que evitam correspondências indevidas.

library(rvest)
html <- read_html('
  <div id="header" class="top">
    <p class="title">Main Title</p>
  </div>
  <div class="content">
    <p class="title">Content Title</p>
  </div>
')
# Overly broad: gets BOTH titles
broad <- html_elements(html, 'p.title')
html_text2(broad)

# Specific: only header title
specific <- html_element(html, '#header p.title')
html_text2(specific)  # 'Main Title'

# Be as specific as needed but not more
content_title <- html_element(html, '.content .title')
html_text2(content_title)

Verificação rápida

Teste sua compreensão sobre os seletores CSS usados na raspagem de dados da web com rvest.

Recapitulação: seletores HTML e CSS

Principais conclusões: o DOM é uma árvore; os seletores CSS permitem navegá-la. Use tag para o tipo de elemento, .class para a classe, #id para elementos únicos, > para filhos diretos e [attr] para atributos. SelectorGadget e DevTools ajudam a descobrir seletores de forma interativa. O XPath (//tag[@attr]) trata dos casos em que o CSS não é suficiente.

# Summary of key CSS selectors for web scraping:
# 'p'            -> all <p> elements
# '.price'       -> elements with class='price'
# '#main'        -> element with id='main'
# 'div > p'      -> direct child p of div
# 'a[href]'      -> a elements that have href attr
# 'a[href*=http] -> a elements where href contains 'http'
# 'li:nth-child(2)' -> second li in its parent
# 'h1, h2'       -> both h1 and h2 elements
# xpath='//td[@class="price"]' -> XPath alternative
library(rvest)
cat('Selectors are the foundation of reliable web scraping')

Perguntas Frequentes

A aula “Estrutura HTML e seletores CSS” é grátis?

Sim — o texto completo de “Estrutura HTML e seletores CSS” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de R Academy, atualize para CoddyKit PRO. O curso de R Academy inclui 4 aulas no total.

O que vou aprender em “Estrutura HTML e seletores CSS”?

Entenda árvores DOM e escreva seletores CSS para direcionar elementos. Você pratica R Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar R Academy?

Nenhuma experiência prévia é necessária. R Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.

Quanto tempo leva a aula “Estrutura HTML e seletores CSS”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de R Academy?

Sim. Cada aula de R Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Estrutura HTML e seletores CSS
  2. Fundamentos de html_element() e html_text()
  3. Extraindo tabelas e links
  4. Lidando com paginação e várias páginas
← Voltar para R Academy