ブックマークレットや、コンソールから特定の情報をサクッと取り出したいみたいなケースがあったので、いくつか調べたことをメモに残す
セレクタの記述方法のサンプル集
基本的に下記読めばOKって内容ではある
CSS セレクター - CSS: カスケーディングスタイルシート | MDN
特定の要素の子要素を指定
要素以下どこでもOK
$('div img')
div以下のどこかのimg要素
直下の要素
$('div > img')
div直下のimg要素
要素の属性に条件指定する
完全一致
$('a[href="https://example.com"]')
hrefがhttps://example.comのa要素
包含条件
$('a[href*="example"]')
hrefにexampleが含まれるa要素
他にも前方一致(^=)、後方一致($=)などもある
否定
$('body :not(p)')
body以下のp要素ではない要素
この例でのpにはセレクタが入るので複雑なこともできる
複数条件
or条件
$('a[href*="fuga"],a[href*="hoge"]')
hrefにfugaが含まれるか、hrefにhogeが含まれるa要素
and条件
$('a[href*="fuga"][href*="hoge"]')
hrefにfugaが含まれるかつ、hrefにhogeが含まれるa要素
特定の要素を持っているかどうか(has)
:has() - CSS: カスケーディングスタイルシート | MDN
<img>を直接子に持つ<a>要素を選択
a:has(> img)
特定の属性を持っていない要素(hasとnotの組み合わせ)
div:not(:has(svg[data="hoge"]))
子要素に「dataがhogeなsvgを持っていない」div要素
親要素に条件をつける
最終的にほしい要素はaタグだったとして
aタグのどこかの親要素のdivタグに条件を入れたい場合
'div.hoge > div:not(:has(svg[data="hoge"])) a[href*="fuga"]'
というように特定階層のdivに条件を持たせてその下のaタグといったようなセレクタを書くことで特定できる
この例を詳しく書くと次のようになる
hogeクラスを持つdiv要素直下のdata属性がhogeのsvg要素を配下に持っていないdiv要素- 配下の
hrefにfugaを含むaタグ
例が結構複雑ではあるがこういうこともできる
注意点として、divに条件を付ける場合にdivだとどこの階層のdiv?をしっかり特定しないと条件が反映されない
document.querySelectorAll('div.hoge div:not(:has(svg[data="hoge"])) a[href*="fuga"]')
ではうまくいかない
document.querySelectorAll('div.hoge > div:not(:has(svg[data="hoge"])) a[href*="fuga"]')
要はdiv要素っていっぱいあるよねってことなのでどこのレベルのDivでnot hasなのかを明示的にしてあげないとうまく除外できないって感じだった
構造の変化に弱いけど…
おわり
これだけ覚えればたいていのことはなんとかなりそう
現時点ではテキストの値を条件には含められないようなのでそれなら最初からXPathで良いのでは?という思いもある…
