本文へスキップ
BecomeCoder

Pythonスクレイピングコース · 第3章 CSSセレクタと構造をたどる · レッスン8

CSSセレクタで取る ― select

ブラウザで完結

導入

Web制作で使う CSSセレクタ.class#id の書き方)を、そのまま要素の指定に使えるのが select です。ブラウザの開発者ツールで得たセレクタを、ほぼそのまま貼れます。

説明

from bs4 import BeautifulSoup

html = """
<div class="card">
  <h2 class="title">記事A</h2>
  <span class="tag">Python</span>
</div>
<div class="card">
  <h2 class="title">記事B</h2>
  <span class="tag">Go</span>
</div>
"""

soup = BeautifulSoup(html, "html.parser")

# class="title" の要素を CSS セレクタで全部取る
titles = soup.select(".title")
for t in titles:
    print(t.text)
  • soup.select(".title") … CSSセレクタに当てはまる要素をすべてリストで返します(find_all の CSS版)。
  • soup.select_one(".title") … 最初の1つだけを返します(find の CSS版)。

主なセレクタの書き方は次のとおりです。

セレクタ意味
h2タグ名で選ぶすべての <h2>
.titleclass で選ぶclass="title"
#mainid で選ぶid="main"
div.cardタグ+classclass="card"<div>
div .title子孫(半角スペース)div の中の .title

やってみよう

soup.select(".title")soup.select(".tag") に変えると、タグ名(Python・Go)が取れます。find_all("span", class_="tag") と同じ結果を、CSSセレクタ .tag で書ける点を見比べてみましょう。

演習

上の HTML から、class="tag" の要素をすべて取り出して1行ずつ print してください(select を使うこと)。

ヒント1を見る

for t in soup.select(".tag"): print(t.text)

実際に動かしてみよう

下のエディタにPythonを書いて「実行」を押すと、本物の BeautifulSoup(Pyodide)でHTMLの解析をその場で試せます。初回だけ読み込みに少し時間がかかります。本文のHTMLを書き換えたり、抜き出すタグを変えたりして、結果の変化を確かめましょう(ネットからの取得は第5章の読み物で解説します)。

Python — ライブラリ付きで実行(Pyodide)

numpy / pandas / matplotlib が使える本物のPython(Pyodide)を読み込みます。初回のみ読み込みに少し時間がかかります(以降はブラウザにキャッシュされます)。
スクロールして表示された時点でも自動で読み込まれます。