スクレイピング講座その9 擬似セレクタの使い方

阿修羅ワークス

2020年03月15日

スクレイピング

前回は属性セレクタを紹介しましたが、今回は擬似セレクタ(クラス)と擬似要素について紹介します。擬似クラスと擬似要素は「:」記号から始まります。疑似とあるように実際にはクラス名や要素が存在しません。この辺が特殊です。

スクレイピングで使用する擬似クラスは6種類

スクレイピングで使用する擬似クラスは主に5つあります。他にもありますが以下の5種類を押さえておけば大丈夫です。 :first-child :last-child :first-of-type :last-of-type :nth-of-type(n) :nth-last-of-type(n) これらをどのように使うかですが、簡単に説明するとある要素から数えてn番目というように使用します。例えば、取得したい要素にクラス名が存在しない、データ構造が常に入れ替わっている場合などは、決め打ちでスクレイピングができなかったりします。しかし、ある要素から数えてn番目という法則性があるのならば、順番によって取得することができます。以下のようなHTMLがあるとします。

<div class="parent">
    <p>テキスト1</p>
    <h2>見出し1</h2>
    <h2>見出し2</h2>
    <p>テキスト2</p>
</div>

:first-childと:first-of-type

「:first-child」と「:first-of-type」は最初に現れる要素を対象とします。「テキスト1」を指定したい場合は以下のようにします。

.parent p:first-child

しかし、以下のようにHTMLの構造が変わると失敗します。「見出し1」と「テキスト1」を入れ替えています。

<div class="parent">
    <p>テキスト1</p>
    <h2>見出し1</h2>
    <h2>見出し2</h2>
    <p>テキスト2</p>
</div>

この2つは似ているのですが、違いは「:first-child」は一番最初の子要素が指定した要素だった場合に対してで、「:first-of-type」は他の子要素もカウント対象にするといった違いがあります。つまり、「.parent」クラスの直下に「<p>」タグは存在しない場合は適用されないのです。そこで、「:first-of-type」にしてみるとうまくいきます。

.parent p:first-of-type

「.parent」クラスの直下に「<h2>」タグがあっても無視して、一番最初に現れる「<p>」タグに適用されるからです。経験上「:first-child」よりも「:first-of-type」を使うことの方が多いです。結構ハマりやすいポイントなので気をつけて下さい。

:last-childと:last-of-type

「:last-child」と「:last-of-type」は最後に現れる要素を対象とします。「:first-child」と「:first-of-type」とは逆になります。単に逆になっただけなので省略します。

:nth-of-type(n)

「:nth-of-type(n)」はn番目の要素という意味です。「n」に数字を指定します。例えば「:nth-of-type(1)」にすると1番目の要素で「:first-of-type」と同じ意味となります。以下のようなHTMLがあるとします。

<div class="parent">
    <p>テキスト1</p>
    <h2>見出し1</h2>
    <h2>見出し2</h2>
    <p>テキスト2</p>
</div>

「見出し2」を指定したい場合は以下のようにします。

.parent h2:nth-of-type(2)

これは2番目に現れる「<h2>」タグと意味になります。その他、偶数とか奇数とか3つごとといった指定もできます。偶数は以下のようになります。

:nth-of-type(2n)

または

:nth-of-type(even)

となります。奇数は以下のようになります。

:nth-of-type(2n+1)

または

:nth-of-type(odd)

となります。 3つごとであれば以下のようになります。

:nth-of-type(3n)

この場合は3，6，9，12……といった3の倍数が対象になります。

:nth-last-of-type(n)

「:nth-last-of-type(n)」は最後から数えて現れる要素を対象とします。「:nth-of-type(n)」とは逆になります。単に逆になっただけなので省略します。

擬似要素

最後に擬似要素ですが、これは「:hover」や「:before」、「:after」といった要素で、残念ながらスクレイピングはできません。例えば「:hover」というのはマウスをあてた時に反応する機能なのですが、HTMLには存在せずブラウザ側で処理している疑似要素です。つまり、データとして実体がないためスクレイピングができないのです。

参考サイト

ここまで何回かに渡ってスクレイピングのためのセレクタを紹介してきましたが、セレクタについてはスタイルシートでよく使うのでネットでたくさんの情報があります。分からないことがあれば調べるとたくさん情報が出てきます。以下に参考サイトを紹介します。 ▼意外と知らない!?CSSセレクタ20個のおさらい http://weboook.blog22.fc2.com/blog-entry-268.html ▼CSSセレクタまとめ、種類別に徹底解説（CSS3対応） https://blog.codecamp.jp/css_selector 参考にして学習してください。

スクレイピング講座 その9 擬似セレクタの使い方