CSSのセレクタをインタラクティブに確認できる超絶便利ブックマークレット『SelectorGadget』

かなりマニアックではあるが、その筋の人にはすっごく便利なのでは。

SelectorGadgetではCSSのセレクタを書くためのブックマークレットを配布している。CSSのセレクタは慣れるまで書くのが大変である。

しかしこれを使えば「タイトルだけを指定するCSSセレクタ」「このテーブルのこの列だけを指定するセレクタ」なんてのをインタラクティブに指定しながら確認していくことができる。

使い方は簡単で、まずはブックマークを好きなページで起動する。すると右下にセレクタ表示用のボックスが現れる。

次にセレクタに含めたいDOMをクリックする。するとそこが緑になり、さらにそのセレクタにマッチするDOMが黄色で表示される。その中で排除したいものがあれば再度クリックすれば赤くなる。

こうやってDOMをクリックしながら作業をしていくとリアルタイムに右下に現在マッチしている要素に関するセレクタが表示される、という仕組みだ。もちろんボックスに直接セレクタを書いてどこがマッチするのかを確認する、という使い方もできる。

このブックマークレットを使って「どういう書き方をすればどこがマッチするのか」を確認するだけでも勉強になるだろう。jQueryなんかを使っている人には特におすすめである。

ツイッターもやっています！