レッスン3 / 3問目

『セレクタの関係を指定』

このレッスンではcssセレクタをさらに細かく指定する方法について解説していきます。

以下の手順で見ていきます。

  • 親要素・子要素・子孫要素・兄弟要素について
  • セレクタ同士の関係を指定

親要素・子要素・子孫要素・兄弟要素について

セレクタの指定を学習するにあたり、HTMLタグの親子・兄弟関係における用語と定義ついて確認しておきましょう。

以下がその一覧です。例については下記表の下にあるHTMLを例題としています。

名称説明
親要素対象要素の一つ上の階層の要素ulの親要素 → div
liの親要素 → ul
子要素対象要素の一つ下の階層の要素ulの子要素 → li
divの子要素 → ul
子孫要素対象要素より下にある要素divの子孫要素 → ulとli
兄弟要素同列の要素liの兄弟要素 → li

<div>     <ul>         <li>A</li>         <li>B</li>         <li>C</li>     </ul> </div>

このようにHTMLの要素には親子・兄弟関係があります。

セレクタ同士の関係を指定

では、soup.select()および、soup.select_one()でセレクタ同士の関係を指定する方法について見ていきましょう。

セレクタの同士の関係について、以下のHTMLを例に見ていきます。

<div id="a">     <ul>         <li>A</li>         <li>B</li>         <li>C</li>     </ul> </div> <div id="b">     <ul>         <li>D</li>         <li>E</li>         <li>F</li>     </ul> </div>

上記のHTMLではidに"a"が指定されたdivタグとidに"b"が指定されたdivタグの下層にそれぞれulとliタグがあります。

まずは、idが"a"のdivタグの下層にあるulタグを取得します。

それには select("#a > ul") と指定します。
これは「"#a"の直下のulタグ」という指定になります。つまり、子要素の指定です。

また、 select("#a ul") と指定すると「"#a"より下層にある全てのulタグ」という指定になります。ここでは"#a"の下層にあるulタグは一つしかないため、 > による直下の指定と同じ意味となります。

他にも以下のような指定方法があります。

指定説明意味
> 直下(子要素)#a > ul#a直下のul
スペースより下層(子孫要素)#a ul#aより下層のul
+直後(隣接)#a + div#aの直後のdiv
~より後ろ#a + div#aより後ろにある同階層のdiv
,複数指定#a, #b#aと#b

直下および下層の指定と、複数指定は以降でも登場しますので押さえておきましょう。

Lesson1

#aの直下にあるpタグのテキストを出力してください。

テキストを出力するには soup.select_one("セレクタ").text と指定します。

Lesson2

#aおよび#bの下層にあるpタグのテキストを以下のとおり出力してください。

AAA BBB

soup.select()はリストを返すためfor文を用いて出力を行ってください。

Last updated:2019/12/24

AAA
AAA
BBB
  1. from bs4 import BeautifulSoup
  2. html = """
  3. <div id="a">
  4. <p>AAA</p>
  5. </div>
  6. <div id="b">
  7. <p>BBB</p>
  8. </div>
  9. """
  10. soup = BeautifulSoup(html, "html.parser")
  11. # 問題1
  12. print(soup.select_one("#a > p").text)
  13. # 問題2
  14. p_list = soup.select("p")
  15. for i in p_list:
  16. print(i.text)
main.py
設定
g
n
i
d
a
o
L