Webbskrapning och botutveckling · Lektion

CSS-selektorer för precision

Använd CSS-selektorer för att hitta och extrahera data från element utifrån deras stilar och attribut.

Lektion 2 av 412 steg

CSS-selektorer för precision är en gratis lektion i Webbskrapning och botutveckling på CoddyKit. Detta är lektion 2 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.

Vad är CSS-väljare?

CSS-väljare är mönster som används för att välja element på en webbsida. Se dem som precisa instruktioner för att hitta specifik information.

Webbläsare använder dem för att tillämpa format (CSS), och vi använder dem för att extrahera data effektivt.

Väljare för dataextrahering

Vid web scraping är CSS-väljare ett kraftfullt sätt att hitta exakt den data ni behöver i komplex HTML.

De är ofta mer koncisa än XPath.
Många utvecklare känner redan till CSS.
BeautifulSoup har utmärkt stöd för dem.

Välj efter tagnamn

Den enklaste väljaren är tagnamnet. Den väljer alla element av den typen.

Exempelvis väljer p alla stycketaggar och a alla ankartaggar (länkar).

Exempel: Om ni vill hitta alla listelement använder ni 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())

Klass- och ID-väljare

Du kan välja element utifrån deras klass- eller ID-attribut. Dessa används mycket ofta för formatering och unik identifiering.

Klass: Använd en punkt . före klassnamnet (till exempel .product-title).
ID: Använd ett nummertecken # före ID-namnet (till exempel #main-content). ID:n ska vara unika!

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())

Välja nästlade element

Om du vill välja element som finns inuti andra element använder du ett mellanslag mellan selektorerna. Detta kallas en ättlingsselektor.

Det betyder "hitta ett element (B) som finns någonstans inuti ett annat element (A)".

Exempel: div p väljer alla <p>-taggar som finns inuti någon <div>-tagg.

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())

Endast direkta barn

Ibland vill du bara välja element som är direkta barn till ett annat element, inte vilka ättlingar som helst.

Använd då större än-symbolen >.

Exempel: ul > li väljer alla <li>-taggar som är direkta barn till en <ul>-tagg.

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())

Välja efter attribut

Du kan välja element utifrån deras attribut och även deras attributvärden!

[attr]: Har attributet (till exempel [href]).
[attr="value"]: Har attributet med exakt det angivna värdet (till exempel [target="_blank"]).
[attr^="value"]: Attributvärdet börjar med det angivna värdet (till exempel [src^="data:"]).
[attr$="value"]: Attributvärdet slutar med det angivna värdet (till exempel [alt$="logo"]).
[attr*="value"]: Attributvärdet innehåller det angivna värdet (till exempel [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'))

Kombinera med kommatecken

Om du vill välja element som matchar någon av flera olika selektorer kan du skilja dem åt med ett kommatecken ,.

Detta är användbart när du vill samla in data från olika typer av element eller platser.

Exempel: h1, h2, h3 väljer alla rubriktaggar på nivå 1, 2 eller 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())

Pseudoklasser för position

CSS-pseudoklasser gör det möjligt att välja element utifrån tillstånd eller position, inte bara attribut. Vid webbskrapning är positionsbaserade pseudoklasser mycket användbara.

:first-child: Väljer det första barnelementet.
:last-child: Väljer det sista barnelementet.
:nth-of-type(n): Väljer det n:te elementet av en viss typ (till exempel li:nth-of-type(2) för det andra listelementet).

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())

Praktisk användning av CSS-selektorer

Nu kombinerar vi det vi har lärt oss för att hämta specifika data från en exempelvis produktlista.

Vi vill ha titeln och priset för den första produkten.

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.")

Snabbtest av selektorer

Vilken CSS-selektor skulle, utifrån HTML-koden nedan, korrekt välja texten "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>

Besvara frågan i den interaktiva lektionen

Sammanfattning: CSS-selektorer

Utmärkt arbete! Du har lärt dig grunderna i CSS-selektorer för webbskrapning.

Vi lärde oss att välja efter tagg, klass och ID.
Vi gick igenom selektorer för ättlingar (mellanslag) och direkta barn (>).
Du kan filtrera efter attribut ([attr="value"]) och använda pseudoklasser som :first-child.
BeautifulSoups metoder .select() och .select_one() gör dem enkla att använda i Python.

Härnäst tittar vi på XPath för ännu kraftfullare urval!

Gratis att börja

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

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”CSS-selektorer för precision” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Webbskrapning och botutveckling, inklusive ”CSS-selektorer för precision”, 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 ”CSS-selektorer för precision”?

Använd CSS-selektorer för att hitta och extrahera data från element utifrån deras stilar och attribut. 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 2 av 4.

Hur lång tid tar lektionen ”CSS-selektorer för precision”?

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

← Tillbaka till Webbskrapning och botutveckling