Menavigasi DOM dengan Selektor CSS
Gunakan selektor CSS bersama BeautifulSoup untuk menargetkan elemen secara tepat saat mengurai HTML, melampaui pencarian dasar berdasarkan nama tag.
Menavigasi DOM dengan Selektor CSS adalah pelajaran Web Scraping & Bots gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Web Scraping & Bots, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Web Scraping & Bots mencakup 4 pelajaran total.
Bagian dari pelajaran ini belum diterjemahkan dan ditampilkan dalam bahasa Inggris.
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.
Belajar Python dengan tutor AI — gratis
Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.
- Kursus
- 12
- Pelajaran
- 48
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Menavigasi DOM dengan Selektor CSS” gratis?
Ya — teks lengkap “Menavigasi DOM dengan Selektor CSS” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Web Scraping & Bots, upgrade ke CoddyKit PRO. Kursus Web Scraping & Bots mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Menavigasi DOM dengan Selektor CSS”?
Gunakan selektor CSS bersama BeautifulSoup untuk menargetkan elemen secara tepat saat mengurai HTML, melampaui pencarian dasar berdasarkan nama tag. Kamu berlatih Web Scraping & Bots dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Web Scraping & Bots?
Tidak diperlukan pengalaman sebelumnya. Web Scraping & Bots di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.
Berapa lama pelajaran “Menavigasi DOM dengan Selektor CSS” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Web Scraping & Bots ini?
Ya. Setiap pelajaran Web Scraping & Bots menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Menyiapkan Lingkungan Anda
- Menggunakan Requests untuk URL
- Mengekstrak Data dengan BeautifulSoup
- Menavigasi DOM dengan Selektor CSS