Python で Web スクレイピングに CSS セレクターを使用する方法

CSS セレクターは、HTML ページから特定のコンテンツをターゲットにして抽出する強力な方法を提供します。この詳細なガイドでは、Python で Web スクレイピングに CSS セレクターを活用するために知っておくべきことをすべて説明しています。

CSS セレクターの概要

CSS セレクターを使用すると、ID、クラス、タグ名、属性などに基づいて Web ページ上の要素を選択できます。ここではいくつかの例を示します。

div - すべて選択
要素は
#container – id="container" の要素を選択します
.item – class="item" で要素を選択します
a[href^="http"] – httpで始まるhrefを含むアンカータグを選択します

50 を超える異なる CSS セレクターのタイプと組み合わせが利用可能です。これには、タグ、ID、クラス、属性、疑似クラス、位置セレクター、状態セレクター、および字句セレクターが含まれます。

キーセレクターの種類には次のようなものがあります。

Selector	例	Description
タイプ	`a`	指定されたタグタイプのすべての要素を選択します
ID	`#container`	特定の id 属性を持つ要素を選択します
CLASS	`.item`	特定のクラス属性を持つ要素を選択します
属性	`a[target]`	特定の属性を持つ要素を選択する
疑似クラス	`a:hover`	特定の状態の要素を選択する

これらをさまざまな方法で組み合わせて、要素を非常に正確にターゲットにすることができます。例えば：

div.content table.data tr.highlight > td

その内訳は次のとおりです。

div.content – <div> class="content" の要素
table.data – <table> 内部に class="data" が含まれる要素 <div>
tr.highlight – <tr> 内部に class="highlight" が含まれる要素 <table>
> td – <td> の直接の子である要素 <tr>

ご覧のとおり、CSS セレクターを使用すると、HTML 階層内の要素をドリルダウンして非常に正確に指定できます。そのため、Web ページから特定のデータを抽出する場合に非常に役立ちます。

調査によると、スタイルを有効にするために CSS ID とクラスが 90% 以上のサイトで使用されています。この普及により、スクレイピングするコンテンツを選択するのにも最適になります。

Python での CSS セレクターの使用

BeautifulSoup や Parsel などの人気のある Python ライブラリには、CSS セレクターのサポートが組み込まれています。

美しいスープ

BeautifulSoup で CSS セレクターを使用するには、 select() メソッド BeautifulSoup オブジェクト：

from bs4 import BeautifulSoup

soup = BeautifulSoup(html)
links = soup.select(‘a‘) # All anchor tags
first_link = soup.select_one(‘a‘) # First anchor tag

select() 一致するすべての要素のリストを返します。
select_one() 最初の一致のみを返します。

小包

Parsel ライブラリは同様の API を提供します。

from parsel import Selector

selector = Selector(html)
links = selector.css(‘a‘).getall() 
first_link = selector.css(‘a‘).get()

.css() CSSセレクターを実行します
.getall() すべての一致を返します
.get() 最初の一致を返します

Parsel は、Scrapy Web スクレイピングフレームワークによって内部的に使用されます。

ライブラリの比較

BeautifulSoup と Parsel はどちらもほぼ同じ CSS セレクター機能を備えています。ベンチマークでは Parsel の方が少し高速ですが、BeautifulSoup は DOM の検索や変更などの追加機能を提供します。

ほとんどのスクレイピング目的では、CSS セレクターのサポートは互換性があります。

CSS セレクターの例

次に、CSS セレクターを使用してデータを収集する具体的な例をいくつか見てみましょう。

タグ名による要素の取得

ページ上のすべてのハイパーリンクを選択します。

links = soup.select(‘a‘)

これはどれにもマッチします <a> アンカータグ要素。

IDで要素を選択

特定の ID を持つページ上のフォームを取得します。

login_form = soup.select_one(‘#loginForm‘)

　 # プレフィックスは、id 属性と一致することを示します。これにより、要素が選択されます id="loginForm".

ID はページ内で一意である必要があるため、常に 1 つの要素が返されます。

クラス名による要素の取得

特定のクラスを持つすべてのページ項目を選択します。

products = soup.select(‘.product-item‘)

　 . プレフィックスはクラスセレクターを示します。これにより、すべての要素が選択されます class="product-item".

クラスは再利用できるため、複数の要素と一致する可能性があることに注意してください。

属性値による選択

type 属性に基づいて入力フィールドを抽出します。

text_inputs = soup.select(‘input[type="text"]‘)

　 [attribute="value"] 構文を使用すると、特定の属性値で照合できます。

複数のセレクターを結合する

特定のサイドバー div 内のアンカーを選択します。

sidebar_links = soup.select(‘div.sidebar a.highlight‘)

これは一致します <a> 要素 class="highlight" 内部 <div class="sidebar">.

子孫要素を選択するセレクターをスペースで区切ることで、複数のセレクターを組み合わせることができます。

CSS セレクターを使用したデータのスクレイピング

要素を抽出したら、CSS セレクターを使用してデータを収集できます。

for product in soup.select(‘.product‘):
  name = product.select_one(‘.product-name‘).text
  price = product.select_one(‘.product-price‘).text
  print(name, price)

これはループします .product 要素を削り取り、 .product-name および .product-price 各製品ブロック内の値。

CSS セレクターの利点は、必要なデータを周囲の HTML から分離できることです。

スクレイピングの例 – Wikipedia 情報ボックス

たとえば、スクレイピングを考えてみましょうウィキペディアの情報ボックス:

url = ‘https://en.wikipedia.org/wiki/Abraham_Lincoln‘
soup = BeautifulSoup(requests.get(url).text)

infobox = soup.select_one(‘.infobox‘)

title = infobox.select_one(‘.fn‘).text
born = infobox.select_one(‘.bday‘).text
office = infobox.select_one(‘.label[style*=bold]‘).text

print(title) # Abraham Lincoln
print(born) # February 12, 1809
print(office) # 16th President of the United States

これにより、次を使用して情報ボックスのコンテンツが分離されます。 .infobox クラスを抽出し、ネストされたタグ、クラス、および属性セレクターを使用して特定のフィールドを抽出します。

ご覧のとおり、さまざまなセレクタータイプを連結すると、必要なデータに焦点を絞ることができます。

テーブルからのデータのスクレイピング

セレクターは、表形式データの収集にも役立ちます。

url = ‘https://www.example.com/data.html‘ 

soup = BeautifulSoup(requests.get(url).text)
table = soup.select_one(‘table.data-table‘)

headers = [h.text for h in table.select(‘th‘)]
rows = []
for row in table.select(‘tr‘):
  cells = [d.text for d in row.select(‘td‘)]
  rows.append(dict(zip(headers, cells)))

print(rows)

これはデータテーブルを抽出し、ヘッダーラベルを読み取り、行をループしてヘッダーとセルのペアから辞書を構築します。

CSS セレクターを使用すると、構造化データを簡単にスクレイピングできます。

スクレイピング用の CSS セレクターの制限

CSS セレクターの欠点の 1 つは、CSS セレクターが解析できるのは静的な HTML のみであり、JavaScript 経由で動的にロードされたコンテンツでは機能しないことです。最新のサイトをスクレイピングするには、Selenium やブラウザ自動化などの追加ツールが必要です。

また、上に移動して親要素を選択する機能も制限されています。したがって、チェーンでは階層をドリルダウンすることしかできず、階層をドリルダウンすることはできません。

それにもかかわらず、CSS セレクターは、その普遍性、速度、データ抽出の利便性により、スクレイピングに不可欠なツールであり続けています。

CSS セレクターの連鎖

チェーンを使用すると、子孫要素をドリルダウンできます。

rows = soup.select(‘div#content table.data tr‘)
for row in rows:
  name = row.select_one(‘td.name‘).text
  price = row.select_one(‘td.price‘).text 
  print(name, price)

まず、すべて <tr> 行が選択されてから、特定の行が選択されます <td> 各行内のセルは連鎖によって抽出されます。

セレクターを組み合わせてチェーンすると、周囲の構造やコンテンツに関連してデータをスクレイピングできます。

高度な CSS セレクター

カバーする価値のある、より高度な CSS セレクター機能もいくつかあります。

ワイルドカード

　 * ワイルドカードセレクターは任意の要素に一致します。

panels = soup.select(‘div.panel *‘) # All descendants

属性セレクター

より複雑な属性のマッチングも可能です。

input[type^="text"] # Type starts with "text"
a[href$=".pdf"] # Href ends with ".pdf" 
div[class*="head"] # Class contains "head"

擬似セレクター

次のような特別な状態セレクター :hover, :visited など。例:

a:visited {color: purple}

サポートはパーサーによって異なります。次のようないくつかの疑似セレクター :contains() CSS ではなくカスタム拡張機能です。

兄弟セレクター

兄弟に基づくターゲット (隣接する兄弟など) p + ul 発見 <ul> 直後 <p>.

否定

:not(selector) 一致する要素を除外します。

これらの追加セレクターにより、スクレイピングをさらに正確に制御できます。

インタラクティブなサイトのスクレイピング

CSS セレクターは静的 HTML でのみ機能しますが、JavaScript で生成されたコンテンツを含むインタラクティブなページをスクレイピングするときに CSS セレクターを使用する方法があります。

ブラウザの自動化

Selenium のようなツールは、CSS セレクターで解析する前にブラウザーに JavaScript をレンダリングさせることができます。

from selenium import webdriver

driver = webdriver.Chrome()
driver.get(url)

soup = BeautifulSoup(driver.page_source)
results = soup.select(‘#results .result‘)

これにより、JS の実行後に要素を選択できるようになります。

ヘッドレスブラウジング

フォーヘッドレススクレイピングでは、Puppeteer や Playwright などのツールが CSS セレクターのサポートを提供します。

from playwright.sync_api import sync_playwright

with sync_playwright() as p:
  browser = p.chromium.launch()
  page = browser.new_page()
  page.goto(url)

  html = page.content()
  soup = BeautifulSoup(html)

JavaScript レンダリング後のページコンテンツを解析できます。

ブラウザ拡張

SelectorGadget のようなブラウザ拡張機能は、ネットワークトラフィックと DOM を分析することで CSS セレクターを収集します。

これらのアプローチにより、CSS セレクターを動的サイトで使用できるようになります。セレクターは依然として HTML にのみ一致しますが、JavaScript を介して動的に生成されます。

制限と課題

CSS セレクターはどこにでもあり便利ですが、いくつかの制限があります。

複雑なサイトのスクレイピング

セレクターは、いくつかの複雑なサイト構造に苦労します。

Frame と iframe は個別に解析する必要があります。
高度なグリッドとレイアウトには、複雑なセレクターが必要になる場合があります。
インタラクティブなウィジェットと埋め込みアプリには、別のアプローチが必要です。

多くの場合、CSS 選択と他の解析ロジックの組み合わせが必要になります。

パフォーマンスの問題

非常に長く複雑なセレクターは速度が低下する可能性があります。 3 ～ 4 レベルを超える深さのネストは避けてください。

個々のセレクターは 3 ～ 4 個以下のコンポーネントでシンプルにすることをお勧めします。複雑な単一の式ではなく、複数の単純なセレクターをチェーンします。

脆性セレクター

クラスや ID などの属性に基づいてターゲットを設定すると、サイトの再設計でこれらの値が変更されると簡単に壊れてしまう脆弱なセレクターが生成されます。

可能であれば、脆弱な属性ではなく、名前、位置、階層に基づいて要素をターゲットにします。または、バックアップとして複数のセレクターを組み合わせます。

DOM トラバーサルの制限

CSS セレクターは、子孫ツリーを下方向にのみ移動でき、親要素までは移動できません。

XPath 式を使用すると、ドキュメントの上と下の両方でより柔軟なトラバースが可能になります。

擬似セレクターのサポート

のような古典的な CSS 疑似セレクター :visited および :hover パーサーにおけるクロスブラウザーのサポートは限られています。カスタムセレクターのような :contains() 規格外です。

次のような単純な疑似クラスに依存します。 :first-child 複雑な擬似セレクターではなく。

CSS セレクターの代替

CSS セレクターは不可欠ではありますが、HTML を解析するための唯一のゲームではありません。

XPath

XPath は、XML/HTML ドキュメント内のノードを選択するためのクエリ言語であり、CSS の代替手段を提供します。

長所：

ドキュメント構造のより強力な走査。
W3C によって維持される堅牢な標準。

短所：

冗長で複雑な構文。
パフォーマンスが遅くなる可能性があります。

正規表現

正規表現でテキストパターンを抽出できます。

長所：

柔軟で強力なパターンマッチング。

短所：

ネストされた HTML を解析すると面倒になります。
トラバーサルのサポートは組み込まれていません。

実際には、CSS セレクター、XPath、および Regex を組み合わせることで、産業規模の Web スクレイピングに最も堅牢な機能が提供されることがよくあります。

ツールとライブラリ

CSS セレクターを操作するための重要なツールをいくつか紹介します。

セレクタガジェット – セレクターを生成するためのブラウザー拡張機能。
劇作家 – CSS セレクターをサポートするヘッドレススクレーパー。
スクラップ – Parsel および CSS セレクターを使用した Web スクレイピングフレームワーク。
人形 – ヘッドレス Chrome スクレイピング。
美しいスープ – 主要な Python HTML パーサー。

これらは、実稼働 Web スクレイピングに CSS セレクターを活用するために必要なすべてを提供します。

まとめ

CSS セレクターは、Web ページからデータを抽出するための多用途かつユビキタスなメカニズムを提供します。 HTML では ID とクラスが普及しているため、ドリルダウンして必要なコンテンツだけを取得するのに最適です。

さまざまなセレクタータイプをマスターし、チェーンやネストを通じてそれらを組み合わせることで、非常に正確なターゲティングが可能になります。 BeautifulSoup や Parsel などの Python ライブラリの力を利用した CSS セレクターは、Web スクレイパーにとって不可欠なテクニックです。