CSS-selectors voor precisie
Pas CSS-selectors toe om gegevens te lokaliseren en te extraheren uit elementen op basis van hun stijlen en attributen.
CSS-selectors voor precisie is een gratis Webscraping en bots-les op CoddyKit. Dit is les 2 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Webscraping en bots. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Webscraping en bots bevat in totaal 4 lessen.
Wat zijn CSS-selectors?
CSS-selectors zijn patronen waarmee je elementen op een webpagina selecteert. Zie ze als nauwkeurige instructies om specifieke stukjes informatie te vinden.
Webbrowsers gebruiken ze om stijlen (CSS) toe te passen, en wij gebruiken ze om efficiënt gegevens op te halen.
Selectors voor gegevens ophalen
Bij webscraping bieden CSS-selectors een krachtige manier om precies de gegevens te vinden die je nodig hebt in complexe HTML.
- Ze zijn vaak beknopter dan XPath.
- Veel ontwikkelaars zijn al vertrouwd met CSS.
- BeautifulSoup biedt er uitstekende ondersteuning voor.
Selecteren op tagnaam
De eenvoudigste selector is de tagnaam. Hiermee selecteer je alle elementen van dat type.
Met p selecteer je bijvoorbeeld alle alineatags en met a alle ankertags (linktags).
Voorbeeld: om alle lijstitems te vinden, gebruik je li.
from bs4 import BeautifulSoup
html_doc = """
<html><body>
<h1>My Title</h1>
<p>First paragraph.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</body></html>
"""
soup = BeautifulSoup(html_doc, 'html.parser')
# Select all 'p' tags
paragraphs = soup.select('p')
for p in paragraphs:
print(p.get_text())
Class- en ID-selectors
Je kunt elementen selecteren op basis van hun klasse- of ID-attributen. Deze worden veel gebruikt voor opmaak en unieke identificatie.
- Klasse: gebruik een punt
.vóór de klassenaam (bijvoorbeeld.product-title). - ID: gebruik een hekje
#vóór de ID-naam (bijvoorbeeld#main-content). ID's moeten uniek zijn!
from bs4 import BeautifulSoup
html_doc = """
<div id="header">Welcome</div>
<p class="intro">Hello there!</p>
<p class="intro">Another intro.</p>
"""
soup = BeautifulSoup(html_doc, 'html.parser')
header = soup.select_one('#header')
print("Header:", header.get_text())
intros = soup.select('.intro')
for p in intros:
print("Intro:", p.get_text())
Geneste elementen selecteren
Als je elementen wilt selecteren die zich binnen andere elementen bevinden, gebruik je een spatie tussen de selectoren. Dit heet een afstammelingselector.
Dit betekent: "zoek een element (B) dat zich ergens binnen een ander element (A) bevindt".
Voorbeeld: div p selecteert alle <p>-tags die zich binnen een <div>-tag bevinden.
from bs4 import BeautifulSoup
html_doc = """
<div>
<p>Inside div paragraph 1</p>
<span>
<p>Inside span inside div</p>
</span>
</div>
<p>Outside div paragraph</p>
"""
soup = BeautifulSoup(html_doc, 'html.parser')
div_paragraphs = soup.select('div p')
for p in div_paragraphs:
print(p.get_text())
Alleen directe kinderen
Soms wil je alleen elementen selecteren die directe kinderen van een ander element zijn, en niet zomaar afstammelingen.
Gebruik hiervoor het groter-dan-teken >.
Voorbeeld: ul > li selecteert alle <li>-tags die directe kinderen van een <ul>-tag zijn.
from bs4 import BeautifulSoup
html_doc = """
<div class="container">
<p>Direct child P</p>
<div>
<p>Nested P (not direct)</p>
</div>
</div>
"""
soup = BeautifulSoup(html_doc, 'html.parser')
direct_p = soup.select('.container > p')
for p in direct_p:
print(p.get_text())
Selecteren op basis van attributen
Je kunt elementen selecteren op basis van hun attributen en zelfs van hun attribuutwaarden!
[attr]: heeft het attribuut (bijvoorbeeld[href]).[attr="value"]: heeft het attribuut met exact deze waarde (bijvoorbeeld[target="_blank"]).[attr^="value"]: de attribuutwaarde begint hiermee (bijvoorbeeld[src^="data:"]).[attr$="value"]: de attribuutwaarde eindigt hiermee (bijvoorbeeld[alt$="logo"]).[attr*="value"]: de attribuutwaarde bevat dit (bijvoorbeeld[id*="item"]).
from bs4 import BeautifulSoup
html_doc = """
<a href="/about">About Us</a>
<a href="https://example.com/contact" target="_blank">Contact</a>
<img src="image.jpg" alt="product image">
"""
soup = BeautifulSoup(html_doc, 'html.parser')
# Select links with target="_blank"
external_links = soup.select('a[target="_blank"]')
for link in external_links:
print("External:", link.get('href'))
# Select images with alt containing "image"
product_images = soup.select('img[alt*="image"]')
for img in product_images:
print("Image:", img.get('src'))
Combineren met komma's
Als je elementen wilt selecteren die overeenkomen met een van meerdere verschillende selectoren, kun je deze scheiden met een komma ,.
Dit is handig als je gegevens uit verschillende typen elementen of locaties wilt verzamelen.
Voorbeeld: h1, h2, h3 selecteert alle kopteksten van niveau 1, 2 of 3.
from bs4 import BeautifulSoup
html_doc = """
<h1>Main Heading</h1>
<p>Some text.</p>
<h2>Sub Heading</h2>
<div>Another div.</div>
"""
soup = BeautifulSoup(html_doc, 'html.parser')
headings = soup.select('h1, h2')
for h in headings:
print(h.get_text())
Pseudoklassen voor positie
Met CSS-pseudoklassen kun je selecteren op basis van status of positie, en niet alleen op basis van attributen. Voor webscraping zijn pseudoklassen op basis van positie erg nuttig.
:first-child: selecteert het eerste kindelement.:last-child: selecteert het laatste kindelement.:nth-of-type(n): selecteert het n-de element van een specifiek type (bijvoorbeeldli:nth-of-type(2)voor het tweede lijstitem).
from bs4 import BeautifulSoup
html_doc = """
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
"""
soup = BeautifulSoup(html_doc, 'html.parser')
first_item = soup.select_one('li:first-child')
print("First:", first_item.get_text())
second_item = soup.select_one('li:nth-of-type(2)')
print("Second:", second_item.get_text())
Praktisch gebruik van CSS-selectoren
We combineren wat we hebben geleerd om specifieke gegevens uit een voorbeeld van een productvermelding te halen.
We willen de titel en prijs van het eerste product.
from bs4 import BeautifulSoup
html_doc = """
<div class="product-list">
<div class="product-card">
<h3 class="product-title">Laptop X1</h3>
<p class="product-price">$999.99</p>
<button class="add-to-cart">Add</button>
</div>
<div class="product-card">
<h3 class="product-title">Mouse Z2</h3>
<p class="product-price">$29.99</p>
<button class="add-to-cart">Add</button>
</div>
</div>
"""
soup = BeautifulSoup(html_doc, 'html.parser')
# Select the first product card
first_product = soup.select_one('.product-card:first-of-type')
if first_product:
title = first_product.select_one('.product-title')
price = first_product.select_one('.product-price')
print("Title:", title.get_text())
print("Price:", price.get_text())
else:
print("No product found.")
Korte controle van selectoren
Welke CSS-selector selecteert bij de onderstaande HTML correct de tekst "Product Name 2"?
<div class="items">
<div id="item-1">
<span class="name">Product Name 1</span>
</div>
<div id="item-2">
<span class="name">Product Name 2</span>
</div>
<p class="name">Other Name</p>
</div>Samenvatting: CSS-selectoren
Goed gedaan! Je beheerst nu de basis van CSS-selectoren voor webscraping.
- We hebben geleerd te selecteren op tag, klasse en ID.
- We hebben afstammelingselectoren (spatie) en selectoren voor directe kinderen (
>) verkend. - Je kunt filteren op attributen (
[attr="value"]) en pseudoklassen gebruiken, zoals:first-child. - Met de methoden
.select()en.select_one()van BeautifulSoup kun je deze eenvoudig in Python gebruiken.
Vervolgens bekijken we XPath voor nog krachtigere selecties!
Leer Python met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 12
- Lessen
- 48
Veelgestelde vragen
Is de les “CSS-selectors voor precisie” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad Webscraping en bots, waaronder “CSS-selectors voor precisie”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus Webscraping en bots bevat in totaal 4 lessen.
Wat leer ik in “CSS-selectors voor precisie”?
Pas CSS-selectors toe om gegevens te lokaliseren en te extraheren uit elementen op basis van hun stijlen en attributen. Je oefent met Webscraping en bots door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met Webscraping en bots te beginnen?
Ervaring vooraf is niet nodig. Webscraping en bots op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 2 van 4.
Hoe lang duurt de les “CSS-selectors voor precisie”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over Webscraping en bots?
Ja. Elke les over Webscraping en bots bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- Complexe HTML-structuren doorlopen
- CSS-selectors voor precisie
- XPath voor robuuste selectie
- Gegevens uit HTML-tabellen extraheren