HTMLタグの属性値の値によって、何らかの要素を指定したい場合があります。
<div class="foo bar"> </div> <div id="hoge"> </div> <div name="hoge"> </div>
CSS の場合、上記であれば、 以下のようなセレクタで指定できます。
.foo { ... }
#hoge { ... }
[name="hoge"] { ... }
XPath の場合は、以下のようになります。
//div[contains(@class, 'foo')] //div[@id='hoge'] //div[@name='hoge']
上記を見てわかる通り、XPath では**属性を @～ であらわします**。@id なら id 属性ということになります。
CSS セレクタはあくまで HTML タグを選択するものですが、XPath では属性値を取得するために使うこともあります。そういった場合には、例えば //div/@id のようにして属性を指定することになります。
「id 属性が hoge であるもの」を指定するには、@id=’hoge’ とします。
name 属性でも同じわけですが、class 属性は contains(@class, ‘foo’) となっています。
これは、class 属性の値はあくまでも “foo bar” であって、”foo” ではないからです。CSS では .foo とすればそのクラス foo が指定されているものを選択できますが、XPath では属性毎に記法が分かれているわけではないため、「class 属性に foo が含まれているもの」という指定をしなければなりません。
それを指定するのが contains(@class, ‘foo’) というわけです。この contains は**関数**であり、他にも様々な関数が使用できます。
関数はネストさせることもできます。例えば「id 属性に hoge を**含まない**もの」を選択するなら、not を使って以下のようにできます。
//div[not(contains(@id, 'hoge'))]
関数は他にも様々あり、それらを使用することで複雑な検索を行うことができます。