今回はセレクタを組み合わせつつセレクタの関係を使ってスクレイピングする要素を特定する方法です。
以下のようなHTMLがあったとします。
<div class="hoge">
<div class="huge">
<p class="content">
<a href="https://www.yahoo.co.jp/" class="link">リンク1</a>
</p>
</div>
<div class="content">
<a href="https://www.google.com/" class="link">リンク2</a>
<a href="https://www.bing.com/" class="link">リンク3</a>
</div>
<div class="description content">
<p>説明文</p>
</div>
</div>子孫セレクタ
セレクタの関係で一番簡単なのは半角スペースです。
.hoge .linkこれは、「.hoge」クラスの下に「.link」クラスがある、という表現で、「子孫セレクタ」と呼ばれます。
一番よく使うパターンですね。
ただし、子孫セレクタなので「リンク1」と「リンク2」と「リンク3」の3つが含まれてしまいます。
子セレクタ
次に、「子セレクタ」です。子供なので孫は含みません。
リンク1だけを特定したいのであれば
.hoge > .huge .linkとします。「>」記号で表現します。
「>」を付けることで直下の要素を指します。
隣接セレクタ
次に「隣接セレクタ」です。隣接という名前が付いているように、その要素の隣(直後)の要素を指します。
「+」記号で表現します。
例えば、「リンク3」を特定したい場合は以下のようにします。
.hoge > .content .link + .link「リンク2」と「リンク3」は同じクラスが付けられているため、隣接したクラスを指定することで「リンク3」を特定できます。
「リンク2」の隣は「リンク3」ということです。
子孫セレクタと子セレクタが高さを表しているのに対して、隣接セレクタは横方向を表しています。
併記による指定方法
他には、セレクタとタグ名をセットにする指定方法があります。
例えば「.content」というクラスは「<p>」タグと「<div>」タグの二種類に付けられていますが、「<p>」タグに付いた「.content」クラスだけを指定する場合は以下のようにします。
p.contentクラスは複数付けられている場合があります。
その場合はクラス名をくっつけて記述することで特定できます。
例えば「説明文」の親クラスは「description」クラスと「content」クラスの2つが付いています。
ですので以下のように指定できます。
.description.content pこのような形でスクレイピングする要素を特定していきます。