プロフィール

髭山髭人(ひげひと)

自分の書いた記事が、一人でも誰かの役に立てば...
活動信条の一つとして「貴方のメモは、誰かのヒント」というのがあります。

このサイトについて

本家HP packetroom.net から切り離した いわゆる技術メモ用のブログで、無料レンタルサーバーにて運用しています。広告表示はその義務なのでご容赦。
XREA さんには長年お世話になっています

Python(+BeautifulSoup)のスクレイピングでCSSセレクタを使う時にスペースは省略出来ない?

概要と環境

ほぼタイトル通り。

  • Python3
  • BeautifulSoup4

でスクレイピングやってたら「あっれれ~?」という事があったので..

こういう感じ

Beautiful Soup 4.4.0 documentation - CSS selectors
BeautifulSoupというPythonのライブラリがあるのですが、
その中にページ上の要素を得るために用意されているselect()というメソッドがあります。
要素を得る手法は他にも幾つかあるのですが、ちょっと複雑な所をピンポイントで取りたかったので、
JavaScriptで言う所のquerySelectorAll()と同じ感覚で使えるコレ(selectメソッド)を用いました。

意図が伝わらなかったらごめん野菜(´・ω・`)

import requests //←記事には関係ないけど、このライブラリすき
from bs4 import BeautifulSoup //←今回の主役

'''
このへん中略
'''

# _res.txt には、返ってきたwebページのテキストデータが入っている。
_local_soup = BeautifulSoup(_res.text , "html.parser")
_target_nodes = _local_soup.select("section.statusArea_pmf2>h3+div")
#↑のCSSセレクタで、対象ノードが得られることが期待される
print(_target_nodes)
# ↑でもなぜか [] が出力される(中身からっぽ)

CSSセレクタで半角スペースを用いなかったのが原因

# ×空で返ってきた方。
_local_soup.select("section.statusArea_pmf2>h3+div")
# 〇期待通り要素が得られた方
_local_soup.select("section.statusArea_pmf2 > h3 + div")

半角スペースを用いる事で、無事期待通り要素群の入った配列が得られました (´∀`)b

いつも雰囲気で使っている、この + とか > とかって名前なんていうんだっけ...
と呼び方を調べたら、結合子と呼ぶみたいです。

参考:mozilla.org - CSSセレクター

この書き方はCSS界での作法なのかしら?

「そもそも、CSSセレクタの結合子を半角スペース開けずに書く事自体がナンセンスなのだろうか」
...と思ってちょろっと調べたけど、よくわかりませんでした。

少なくとも、(Chromeの)JavaScriptでアレコレする分には、半角スペース不要だったんですよね。
document.querySelector("section.statusArea_pmf2>h3+div");
みたいに書いても普通に要素取れたので Σ(´ ` )

まぁ、Pythonとjsという異なる言語間で取り扱っているとはいえ、
同じCSSセレクタの書き方でも、OKな物とNGな物が出てくるのはちょっと意外でした

余談

色々調べがてら漁ってたら、自分に馴染みのないセレクタ結合子が...

mozilla.org - CSSセレクター / 一般兄弟結合子(続く兄弟結合子)
mozilla.org - CSSセレクター / 列結合子 ※草案段階

覚えておいた方が良いんでしょうけれども...うごご... orz