이전과 거의 같은 HTML입니다. 여기에 더해, 세 번째 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로는 할 수 없는 일을 할 수 있습니다. 바로 하위 노드의 속성에 기반해 요소를 선택하는 것입니다. 이를 위해 술어(predicate)를 사용할 수 있어요. 여기서의 최종 목표는 third 클래스를 가진 p 요소를 포함하는 div 요소만 선택하는 것입니다. 이를 위해 특정 술어와 일치하는 div만 선택해야 합니다. 즉, 해당 하위 요소를 가지고 있어야 하며(직접 자식일 필요는 없습니다). 단계별로 진행해 볼게요.

위의 HTML은 weather_html로 제공됩니다.

XPATH 소개

Create Your Free Account