先ほどとほぼ同じHTMLです。加えて、3つ目のdivには、クラスthirdを持つp要素があります。

<html>
  <body>
    <div id = 'first'>
      <h1 class = 'big'>Berlin Weather Station</h1>
      <p class = 'first'>Temperature: 20°C</p>
      <p class = 'second'>Humidity: 45%</p>
    </div>
    <div id = 'second'>...</div>
    <div id = 'third'>
      <p class = 'first'>Sunshine: 5hrs</p>
      <p class = 'second'>Precipitation: 0mm</p>
      <p class = 'third'>Snowfall: 0mm</p>
    </div>
  </body>
</html>

XPATHなら、CSSではできないこと——子孫要素の特性に基づいて要素を選択する——が可能です。そのためにプレディケートを使います。ここでの最終目標は、クラスthirdを持つp要素を内包するdiv要素だけを選択することです。そのためには、特定のプレディケート（該当する子孫を持つこと。直接の子である必要はありません）に一致するdivのみを選ぶ必要があります。これを段階的に行っていきます。

先ほどと同様、このHTMLはweather_htmlとして与えられています。

XPATH の関数と高度な述語

Create Your Free Account