クエスト5：CSSセレクタ（select）で検索

今回の課題

.news-title と .news-date をそれぞれ select で取得し、「[日付] タイトル」の形式で出力しよう！

📖 解説を見る

🎯 CSS セレクタでデータを抽出しよう

• soup.select(".クラス名")：クラスで全件取得
• soup.select_one("#id")：IDで1件取得
• soup.select("div.card a")：階層指定

CSS を知っていれば直感的に書けます！

ヒントを見る

soup.select(".news-title") でクラスが news-title の要素を全件取得。リスト内包表記 [tag.text for tag in ...] が便利

期待する出力

[2024-10-01] Python 3.13 がリリース
[2024-10-05] JavaScript の新仕様公開
[2024-10-10] Rust 2.0 ロードマップ発表

📄 見本

「答えを見る」を押すと、お手本のコードが出ます。クリックでコピーできます。

💻 コードエディタ

from bs4 import BeautifulSoup

html_content = """
<html>
<body>
  <div class="news-list">
    <article class="news-item">
      <h2 class="news-title">Python 3.13 がリリース</h2>
      <span class="news-date">2024-10-01</span>
      <p class="news-summary">新機能として型システムの改善が含まれます。</p>
    </article>
    <article class="news-item">
      <h2 class="news-title">JavaScript の新仕様公開</h2>
      <span class="news-date">2024-10-05</span>
      <p class="news-summary">ECMAScript 2024 が正式に公開されました。</p>
    </article>
    <article class="news-item">
      <h2 class="news-title">Rust 2.0 ロードマップ発表</h2>
      <span class="news-date">2024-10-10</span>
      <p class="news-summary">次世代Rustの開発計画が明らかになりました。</p>
    </article>
  </div>
</body>
</html>
"""

soup = BeautifulSoup(html_content, 'html.parser')

# TODO: select を使って .news-title をすべて取得し、タイトルをリストに入れてください
titles = [tag.text for tag in soup.select("???")]

# TODO: select を使って .news-date をすべて取得し、日付をリストに入れてください
dates = [tag.text for tag in soup.select("???")]

for title, date in zip(titles, dates):
    print(f"[{date}] {title}")

あなたの出力

実行すると結果がここに表示されます

クエスト5：CSSセレクタ（select）で検索

クエスト5：CSSセレクタ（select）で検索

れんしゅうもんだい