PythonでWebスクレイピングを行うとき、BeautifulSoupライブラリはとても便利です。
その中で要素を効率的に取得するためのテクニックが「CSSセレクタ」です。
この記事では、「BeautifulSoup × CSSセレクタ」を前提に、初心者でも理解しやすいように基本の書き方から使用例までを丁寧に解説していきます。
CSSセレクタとは？
CSSセレクタは、HTML要素を指定するための記法で、もともとはWebページのスタイル（見た目）を指定するために使われてきました。しかし、スクレイピングでも「特定の要素を探す」ために同じ文法が使えます。
例えば：
soup.select('div.article')この1行だけで、HTML中のすべての <div class="article"> を取得できます。
基本のセレクタ一覧（要素・クラス・ID）
| 記法 | 意味 | 使用例 |
|---|---|---|
* | すべての要素 | soup.select('*') |
div | 指定した要素名 | soup.select('div') |
.className | クラス属性を持つ要素 | soup.select('.news') |
#idName | ID属性を持つ要素 | soup.select('#main-title') |
セレクタの組み合わせ（階層・隣接）
| 記法 | 意味 | 使用例 |
|---|---|---|
A, B | AまたはBすべて | soup.select('h1, h2') |
A B | Aの中のすべてのB（子孫） | soup.select('div p') |
A > B | Aの直下のB（子） | soup.select('ul > li') |
A + B | Aに隣接するB（直後） | soup.select('h2 + p') |
A ~ B | A以降の兄弟要素のB | soup.select('h2 ~ p') |
属性セレクタ
HTMLタグの属性に基づいて要素を選択する方法です。
| 記法 | 意味 | 使用例 |
|---|---|---|
[attr] | 特定の属性を持つ要素 | a[href]（リンク要素） |
[attr="value"] | 属性値が完全一致 | input[type="text"] |
[attr^="val"] | 属性値が「val」で始まる | img[src^="https"] |
[attr$="val"] | 属性値が「val」で終わる | a[href$=".pdf"] |
[attr*="val"] | 属性値に「val」を含む | div[class*="main"] |
要素の位置や状態に関するセレクタ
これらは、リストやUI部品の特定の位置・状態を判定するのに便利です。
| セレクタ | 意味 | 使用例 |
|---|---|---|
:first-child | 最初の子要素 | ul li:first-child |
:last-child | 最後の子要素 | ul li:last-child |
:nth-child(n) | n番目の子要素 | ul li:nth-child(2) |
:only-child | 一つだけの子要素 | div:only-child |
:empty | 中身が空の要素 | p:empty |
:not(selector) | 除外 | div:not(.active) |
使用例（BeautifulSoupと組み合わせ）
from bs4 import BeautifulSoup
import requests
url = 'https://example.com/news'
res = requests.get(url)
soup = BeautifulSoup(res.text, 'html.parser')
# クラス名が "headline" のh2タグを取得
titles = soup.select('h2.headline')
for title in titles:
print(title.text)
# aタグのhref属性がhttpsで始まるリンクを取得
secure_links = soup.select('a[href^="https"]')よくあるミス・注意点
IDやクラス名の指定ミス
- クラス名は「.（ドット）」をつける
- IDは「#（シャープ）」をつける
- HTML上でのスペルや大文字小文字に注意
属性セレクタに「””」を忘れない
# 正しい
soup.select('input[type="checkbox"]')
# 間違い（SyntaxErrorになります）
soup.select('input[type=checkbox]')select_one()とselect()の違い
select()は リスト を返すselect_one()は 最初の要素だけ返す
まとめ：覚えておきたいCSSセレクタ5選
| セレクタ | よく使う場面 |
|---|---|
.class | クラス指定の要素全体を取得 |
#id | 固定IDを持つ要素の取得 |
div > p | ネスト構造から特定の要素を取得 |
a[href$=".pdf"] | PDFリンクの抽出 |
li:nth-child(3) | リスト中の特定の行を取得 |
補足：セレクタの調査にはブラウザの開発者ツール
ChromeやEdgeなどの開発者ツール（F12）を開いて、該当のHTML要素を右クリック → Copy selector を使えば、正確なセレクタをコピーできます。スクレイピング対象の特定には非常に便利です！