Navigera i DOM med CSS-selektorer
Använd CSS-selektorer med BeautifulSoup för att träffa rätt element vid tolkning av HTML, bortom enkla sökningar på taggnamn.
Navigera i DOM med CSS-selektorer är en gratis lektion i Webbskrapning och botutveckling på CoddyKit. Detta är lektion 4 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Webbskrapning och botutveckling, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Webbskrapning och botutveckling innehåller totalt 4 lektioner.
Varför CSS-selektorer?
Ni kan hitta taggar genom namn med BeautifulSoup, men riktiga sidor kräver precision. CSS-selektorer låter er rikta in er på element exakt som ett formatmall skulle göra.
select kontra find
BeautifulSoup erbjuder select() (returnerar en lista) och select_one() (returnerar den första träffen), som accepterar CSS-selektorssträngar.
from bs4 import BeautifulSoup
soup = BeautifulSoup(html, 'html.parser')
items = soup.select('li')
first = soup.select_one('h1')Välja efter klass
Sätt en punkt före klassnamnet.
prices = soup.select('.price')
for p in prices:
print(p.get_text())Välja efter ID
Sätt ett hashtecken före ett id. ID:n är unika, så kombinera med select_one.
header = soup.select_one('#main-header')
print(header.get_text())Selektorer för underordnade element
Ett blanksteg betyder underordnat element: matcha element som ligger var som helst inuti ett annat element.
titles = soup.select('div.product h2')
for t in titles:
print(t.get_text(strip=True))Selektorer för direkta barn
En > matchar endast direkta barn, inte djupare underordnade element.
rows = soup.select('table > tbody > tr')
print(len(rows))Attributselektorer
Rikta in er på element genom attributvärden inom hakparenteser.
links = soup.select('a[href^="https"]')
images = soup.select('img[alt]')Kombinera selektorer
Kedja villkor för en exakt träff — tagg, klass och attribut tillsammans.
buttons = soup.select('button.cta[data-action="buy"]')Extrahera attribut
När elementet har valts läser ni attribut som href eller src med hakparentesnotation.
for a in soup.select('a.product-link'):
print(a['href'])nth-of-type
Pseudoklasser som :nth-of-type väljer element efter position.
second = soup.select('ul li:nth-of-type(2)')
print(second[0].get_text())Ett komplett mini exempel
Kombinera allt för att skrapa en lista med produktnamn och priser.
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)Snabbtest
Vilken CSS-selektor matchar ett element vars klass är exakt price?
Sammanfattning
Ni har lärt er CSS-selektorer i BeautifulSoup:
- select / select_one
- Selektorer för klass (.), id (#), underordnade element och barn (>)
- Attributselektorer och pseudoklasser
- Extrahera attribut
Med CSS-selektorer kan ni exakt rikta in er på de data ni behöver på komplexa sidor.
Lär dig Python med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 12
- Lektioner
- 48
Vanliga frågor
Är lektionen ”Navigera i DOM med CSS-selektorer” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Webbskrapning och botutveckling, inklusive ”Navigera i DOM med CSS-selektorer”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Webbskrapning och botutveckling innehåller totalt 4 lektioner.
Vad lär jag mig i ”Navigera i DOM med CSS-selektorer”?
Använd CSS-selektorer med BeautifulSoup för att träffa rätt element vid tolkning av HTML, bortom enkla sökningar på taggnamn. Ni övar på Webbskrapning och botutveckling med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig Webbskrapning och botutveckling?
Du behöver inga förkunskaper. Utbildningen i Webbskrapning och botutveckling på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 4 av 4.
Hur lång tid tar lektionen ”Navigera i DOM med CSS-selektorer”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här Webbskrapning och botutveckling-lektionen?
Ja. Varje Webbskrapning och botutveckling-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Konfigurera utvecklingsmiljön
- Använda Requests för URL:er
- Extrahera data med BeautifulSoup
- Navigera i DOM med CSS-selektorer