Web Scraping & Bots · Ders

Hassasiyet İçin CSS Seçicileri

Stillerine ve özniteliklerine göre öğeleri belirleyip bu öğelerden veri çıkarmak için CSS seçicilerini uygulayın.

Hassasiyet İçin CSS Seçicileri, CoddyKit'te ücretsiz bir Web Scraping & Bots dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Web Scraping & Bots öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Web Scraping & Bots kursu toplamda 4 dersten oluşur.

Bu dersin bazı bölümleri henüz çevrilmemiş olup İngilizce olarak gösterilmektedir.

What are CSS Selectors?

CSS selectors are patterns used to select elements on a web page. Think of them as precise instructions for finding specific pieces of information.

Web browsers use them to apply styles (CSS), and we'll use them to extract data efficiently.

Selectors for Data Extraction

In web scraping, CSS selectors provide a powerful way to pinpoint exactly the data you need from complex HTML.

They are often more concise than XPath.
Many developers are already familiar with CSS.
BeautifulSoup has excellent support for them.

Selecting by Tag Name

The simplest selector is the tag name. This selects all elements of that type.

For example, p selects all paragraph tags, and a selects all anchor (link) tags.

Example: To find all list items, you'd use 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 and ID Selectors

You can select elements based on their class or ID attributes. These are very common for styling and unique identification.

Class: Use a dot . before the class name (e.g., .product-title).
ID: Use a hash # before the ID name (e.g., #main-content). IDs should be unique!

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

Selecting Nested Elements

To select elements that are inside other elements, you use a space between selectors. This is called a descendant selector.

It means "find an element (B) that is anywhere inside another element (A)".

Example: div p selects all <p> tags that are inside any <div> tag.

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

Direct Children Only

Sometimes you only want elements that are direct children of another element, not just any descendant.

Use the greater than symbol > for this.

Example: ul > li selects all <li> tags that are direct children of a <ul> tag.

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

Selecting by Attributes

You can select elements based on their attributes and even their attribute values!

[attr]: Has the attribute (e.g., [href]).
[attr="value"]: Has attribute with exact value (e.g., [target="_blank"]).
[attr^="value"]: Attribute value starts with (e.g., [src^="data:"]).
[attr$="value"]: Attribute value ends with (e.g., [alt$="logo"]).
[attr*="value"]: Attribute value contains (e.g., [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'))

Combining with Commas

To select elements that match any of several different selectors, you can separate them with a comma ,.

This is useful when you want to gather data from different types of elements or locations.

Example: h1, h2, h3 selects all heading tags of level 1, 2, or 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-classes for Position

CSS pseudo-classes allow selection based on state or position, not just attributes. For scraping, position-based ones are very useful.

:first-child: Selects the first child element.
:last-child: Selects the last child element.
:nth-of-type(n): Selects the Nth element of a specific type (e.g., li:nth-of-type(2) for the second list item).

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

Practical CSS Selector Use

Let's combine what we've learned to extract specific data from a sample product listing.

We want the title and price of the first 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.")

Quick Check on Selectors

Given the HTML below, what CSS selector would correctly select the text "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>

Recap: CSS Selectors

Great job! You've mastered the basics of CSS selectors for web scraping.

We learned to select by tag, class, and ID.
We explored descendant (space) and direct child (>) selectors.
You can filter by attributes ([attr="value"]) and use pseudo-classes like :first-child.
BeautifulSoup's .select() and .select_one() methods make using them easy in Python.

Next, we'll look into XPath for even more powerful selections!

Sıkça Sorulan Sorular

“Hassasiyet İçin CSS Seçicileri” dersi ücretsiz mi?

Evet — “Hassasiyet İçin CSS Seçicileri” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Web Scraping & Bots kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Web Scraping & Bots kursu toplamda 4 dersten oluşur.

“Hassasiyet İçin CSS Seçicileri” dersinde ne öğreneceğim?

Stillerine ve özniteliklerine göre öğeleri belirleyip bu öğelerden veri çıkarmak için CSS seçicilerini uygulayın. Web Scraping & Bots ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Web Scraping & Bots öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Web Scraping & Bots, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.

“Hassasiyet İçin CSS Seçicileri” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Web Scraping & Bots dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Web Scraping & Bots dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← Web Scraping & Bots Sayfasına Dön