XPathとCSSセレクター対応表

  • 15
    いいね
  • 0
    コメント
この記事は最終更新日から1年以上が経過しています。

Yahoo PipesとかでXPathを使わなきゃいけないとき、CSSだとこう書くんだけどXPathでどう書いたらいいんだろう?と思って調べていたらとても良い対応表を書いている人がいたので翻訳してみた。

取得対象 CSS3 XPath
全ての要素 * //*
全てのP要素 p //p
全ての子要素 p > * //p/*
ID指定 #foo //*[@id='foo']
クラス指定 .foo //*[contains(@class,'foo')] ※
属性指定 *[title] //*[@title]
全てのPの最初の子要素 p > *:first-child //p/*[0]
子要素Aを持つ全てのP 不可 //p[a]
次の要素 p + * //p/following-sibling::*[0]

※この式はクラスが'foobar'でも'foo bar'でもマッチしてしまうので厳密には正しくありません。実際にこれらを区別しようと思ったらもっと複雑で複数の式を組み合わせる必要があるでしょう。