Nettskraping og boter · leksjon

CSS-selektorer for presisjon

Bruk CSS-selektorer for å finne og hente ut data fra elementer basert på stilene og attributtene deres.

Leksjon 2 av 412 trinn

CSS-selektorer for presisjon er en gratis leksjon i Nettskraping og boter på CoddyKit. Dette er leksjon 2 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Nettskraping og boter, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Nettskraping og boter inneholder totalt 4 leksjoner.

Hva er CSS-selektorer?

CSS-selektorer er mønstre som brukes til å velge elementer på en nettside. Tenk på dem som presise instruksjoner for å finne bestemte informasjonsbiter.

Nettlesere bruker dem til å bruke stiler (CSS), og vi skal bruke dem til å hente ut data effektivt.

Selektorer for uthenting av data

Ved web scraping gir CSS-selektorer en effektiv måte å finne akkurat de dataene De trenger, i kompleks HTML.

De er ofte mer kompakte enn XPath.
Mange utviklere kjenner allerede til CSS.
BeautifulSoup har svært god støtte for dem.

Velge etter taggnavn

Den enkleste selektoren er taggnavnet. Den velger alle elementer av denne typen.

For eksempel velger p alle avsnittstagger, mens a velger alle anker- (lenke-)tagger.

Eksempel: For å finne alle listeelementer bruker De 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())

Klasse- og ID-selektorer

De kan velge elementer basert på class- eller ID-attributtene deres. Disse brukes svært ofte til styling og entydig identifikasjon.

Class: Bruk et punktum . før klassenavnet (for eksempel .product-title).
ID: Bruk et nummertegn # før ID-navnet (for eksempel #main-content). ID-er bør være unike!

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

Velge nestede elementer

For å velge elementer som befinner seg inne i andre elementer, bruker De et mellomrom mellom selektorene. Dette kalles en descendant-selektor.

Det betyr «finn et element (B) som befinner seg hvor som helst inne i et annet element (A)».

Eksempel: div p velger alle <p>-tagger som befinner seg inne i en hvilken som helst <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())

Bare direkte underordnede elementer

Noen ganger ønsker De bare elementer som er direkte underordnede elementer av et annet element, ikke en hvilken som helst etterkommer.

Bruk større enn-symbolet > til dette.

Eksempel: ul > li velger alle <li>-tagger som er direkte underordnede elementer av 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())

Velge etter attributter

De kan velge elementer basert på attributtene deres, og til og med på attributtverdiene!

[attr]: Har attributtet (for eksempel [href]).
[attr="value"]: Har attributtet med nøyaktig denne verdien (for eksempel [target="_blank"]).
[attr^="value"]: Attributtverdien starter med (for eksempel [src^="data:"]).
[attr$="value"]: Attributtverdien slutter med (for eksempel [alt$="logo"]).
[attr*="value"]: Attributtverdien inneholder (for eksempel [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'))

Kombinere med komma

For å velge elementer som samsvarer med en hvilken som helst av flere ulike selektorer, kan De skille dem med et komma ,.

Dette er nyttig når De vil hente data fra ulike typer elementer eller steder.

Eksempel: h1, h2, h3 velger alle overskriftstagger 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())

Pseudo-klasser for plassering

CSS-pseudo-klasser gjør det mulig å velge basert på tilstand eller plassering, ikke bare attributter. Ved scraping er plasseringsbaserte pseudo-klasser svært nyttige.

:first-child: Velger det første underordnede elementet.
:last-child: Velger det siste underordnede elementet.
:nth-of-type(n): Velger det n-te elementet av en bestemt type (for eksempel li:nth-of-type(2) for det andre listeelementet).

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 bruk av CSS-selektorer

La oss kombinere det vi har lært, for å hente ut bestemte data fra en eksempelvisning av produkter.

Vi ønsker tittelen og prisen på det første produktet.

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

Rask sjekk av selektorer

Gitt HTML-koden nedenfor, hvilken CSS-selektor vil velge teksten «Product Name 2» på riktig måte?

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

Besvar den i den interaktive leksjonen

Oppsummering: CSS-selektorer

Godt jobbet! De har lært det grunnleggende om CSS-selektorer for web scraping.

Vi lærte å velge etter tagg, class og ID.
Vi utforsket selektorer for etterkommere (mellomrom) og direkte underordnede elementer (>).
De kan filtrere etter attributter ([attr="value"]) og bruke pseudo-klasser som :first-child.
BeautifulSoups .select()- og .select_one()-metoder gjør det enkelt å bruke dem i Python.

Deretter skal vi se nærmere på XPath for enda kraftigere utvalg!

Gratis å komme i gang

Lær deg Python med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 12
Leksjoner: 48

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «CSS-selektorer for presisjon» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Nettskraping og boter, inkludert «CSS-selektorer for presisjon», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i Nettskraping og boter inneholder totalt 4 leksjoner.

Hva lærer jeg i «CSS-selektorer for presisjon»?

Bruk CSS-selektorer for å finne og hente ut data fra elementer basert på stilene og attributtene deres. Du øver på Nettskraping og boter med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med Nettskraping og boter?

Ingen tidligere erfaring er nødvendig. Nettskraping og boter på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 2 av 4.

Hvor lang tid tar leksjonen «CSS-selektorer for presisjon»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne Nettskraping og boter-leksjonen?

Ja. Alle Nettskraping og boter-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

← Tilbake til Nettskraping og boter