Navegación por el DOM con selectores CSS
Use selectores CSS con BeautifulSoup para seleccionar elementos con precisión al analizar HTML, y vaya más allá de las búsquedas básicas por nombre de etiqueta.
Navegación por el DOM con selectores CSS es una lección gratuita de Web Scraping & Bots en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Web Scraping & Bots, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Web Scraping & Bots incluye 4 lecciones en total.
Partes de esta lección aún no han sido traducidas y se muestran en inglés.
Why CSS Selectors?
You can find tags by name with BeautifulSoup, but real pages need precision. CSS selectors let you target elements exactly like a stylesheet would.
select vs find
BeautifulSoup offers select() (returns a list) and select_one() (returns the first match) that accept CSS selector strings.
from bs4 import BeautifulSoup
soup = BeautifulSoup(html, 'html.parser')
items = soup.select('li')
first = soup.select_one('h1')Selecting by Class
Prefix a class name with a dot.
prices = soup.select('.price')
for p in prices:
print(p.get_text())Selecting by ID
Prefix an id with a hash. IDs are unique, so pair with select_one.
header = soup.select_one('#main-header')
print(header.get_text())Descendant Selectors
A space means descendant: match elements nested anywhere inside another.
titles = soup.select('div.product h2')
for t in titles:
print(t.get_text(strip=True))Direct Child Selectors
A > matches only direct children, not deeper descendants.
rows = soup.select('table > tbody > tr')
print(len(rows))Attribute Selectors
Target elements by attribute values inside square brackets.
links = soup.select('a[href^="https"]')
images = soup.select('img[alt]')Combining Selectors
Chain conditions for tight targeting — tag, class and attribute together.
buttons = soup.select('button.cta[data-action="buy"]')Extracting Attributes
Once selected, read attributes like href or src with bracket access.
for a in soup.select('a.product-link'):
print(a['href'])nth-of-type
Pseudo-classes like :nth-of-type pick elements by position.
second = soup.select('ul li:nth-of-type(2)')
print(second[0].get_text())A Full Mini Example
Combine everything to scrape a list of product names and prices.
for card in soup.select('div.card'):
name = card.select_one('.title').get_text(strip=True)
price = card.select_one('.price').get_text(strip=True)
print(name, price)Quick Check
Which CSS selector matches an element whose class is exactly price?
Recap
You learned CSS selectors in BeautifulSoup:
- select / select_one
- Class (.), id (#), descendant and child (>) selectors
- Attribute selectors and pseudo-classes
- Extracting attributes
CSS selectors let you target exactly the data you need on complex pages.
Aprende Python con un tutor de IA — gratis
Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.
- Cursos
- 12
- Lecciones
- 48
Preguntas frecuentes
¿La lección «Navegación por el DOM con selectores CSS» es gratis?
Sí — el texto completo de «Navegación por el DOM con selectores CSS» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Web Scraping & Bots, actualiza a CoddyKit PRO. El curso de Web Scraping & Bots incluye 4 lecciones en total.
¿Qué aprenderé en «Navegación por el DOM con selectores CSS»?
Use selectores CSS con BeautifulSoup para seleccionar elementos con precisión al analizar HTML, y vaya más allá de las búsquedas básicas por nombre de etiqueta. Practicas Web Scraping & Bots con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Web Scraping & Bots?
No se requiere experiencia previa. Web Scraping & Bots en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «Navegación por el DOM con selectores CSS»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Web Scraping & Bots?
Sí. Cada lección de Web Scraping & Bots incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Configuración del entorno
- Uso de Requests para URL
- Extracción de datos con BeautifulSoup
- Navegación por el DOM con selectores CSS