CSSセレクター・XPathの使い分けって？

セレクター・XPathってしってますか？

Webのシステムやサイト構成でいつかは意識しないといけない（気がしている）
セレクターはご存じでしょうか。
CSSのみならずJSからデザインや動きをつけるためにDOM構造などはみなさん意識されているのではないかな？と思います。

セレクターとは

こんな時は参考サイト！(っ'-')╮=͟͟͞͞　ブォン
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Selectors

ざっくり言うとCSSのスタイルを適用するための条件式です。
しかし私は主にJavascriptで要素を特定するために利用していたりします。
・nameが「lastname」っていうINPUTを特定したい
・チェックが入っているcheckboxを検出したい！
こういう時にセレクターから検索することが可能ですφ(･ω･ )

セレクターの簡単な取得・検証方法

では実際にサイトではどんな要素にどんなセレクタが設定されているんでしょうか？
Chromeの検証ツールでは簡単にセレクターの取得が可能です。

① まずは検証ツールを表示！検索したい要素の上で、右クリック⇨検証　で表示可能です！
② 右クリックすると「要素」タブを選択しましょう！
③ この要素の上で右クリック⇨コピー⇨selector をコピー

これでセレクターの取得が可能です。
例えば：
#fSearch　・・・　こんな感じデータが取得された場合、IDが付与されているのでIDが取得できました。
.ClassName ・・・　こんな感じで「.」が先頭についている場合はクラス名が付与されていたのでクラスを取得しています。
さらに、こう言った値が取得できた場合は…
 > #id_test> section.function_area > ul > li:nth-child(2) > div
これは擬似クラスと呼ばれるものです。色々な種類がありますが、選択した要素がIDやNAMEで一発で特定できない場合、
こう言った順番で取得が可能です。

Chromeでセレクタを取得しましたが、Chromeの検証ツールでは逆に「要素」タブを選択したまま
”Ctrl+F”でセレクタの文字列を検索することも可能です。

じゃあXPathとは？

XPathは（私だけかもしれませんが）Webではセレクターよりかは少しとっつきにくいイメージがあります。
例えばXMLファイルなどのツリー構造になっているものを指定できます。
HTMLファイルもツリー構造になっているので、XPathによって目的の要素を指定することが可能です。

セレクタとの違いは、要素のテキストで指定できる！複数条件の指定が可能！などセレクタよりも少しだけ自由が利きやすいです。
例えば、
<a href="http://google.co.jp">グーグルのリンクだよ</a>
こういった要素に対して、セレクタでは a[href="http://google.co.jp"] こう言った属性を使った指定は可能です。
しかし「グーグルのリンクだよってなってるAタグを探したいんだよ」と言う時にはセレクタでは不可能です。
（できるんでしょうか…見つからないだけかもですが…）
XPathでは、//a[text()='グーグルのリンクだよ']　こんな感じで要素の特定が可能です。

じゃあXPathも取得方法行ってみましょう

① まずは検証ツールを表示！検索したい要素の上で、右クリック⇨検証！
② 右クリックすると「要素」タブを選択しましょう！
③ この要素の上で右クリック⇨コピー⇨XPathをコピー

ほとんどセレクターと同じです。検索も同じ方法で可能です。

セレクタとXPathについては簡単ですが以上です。
次は実際にこう言った値を使って何をしたいの？どう言うことに使うと便利なの？というところを
ご紹介できればと思います！