0Pricing
Web Scraping & Bots · Lesson

Navigating the DOM with CSS Selectors

Use CSS selectors with BeautifulSoup to precisely target elements when parsing HTML, going beyond basic tag-name searches.

Navigating the DOM with CSS Selectors is a free Web Scraping & Bots lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Web Scraping & Bots learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

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.

Frequently asked questions

Is the “Navigating the DOM with CSS Selectors” lesson free?

Yes — the full text of “Navigating the DOM with CSS Selectors” is free to read here on the web, and the Web Scraping & Bots course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Web Scraping & Bots course, upgrade to CoddyKit PRO.

What will I learn in “Navigating the DOM with CSS Selectors”?

Use CSS selectors with BeautifulSoup to precisely target elements when parsing HTML, going beyond basic tag-name searches. You practise Web Scraping & Bots with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Web Scraping & Bots?

No prior experience is required. Web Scraping & Bots on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Navigating the DOM with CSS Selectors” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Web Scraping & Bots lesson?

Yes. Every Web Scraping & Bots lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. Setting Up Your Environment
  2. Using Requests for URLs
  3. Extracting Data with BeautifulSoup
  4. Navigating the DOM with CSS Selectors
← Back to Web Scraping & Bots