スリ飯屋MaLankaのフリーエンジニアな日々

このブログでは、フリーランス5期目となる自身の実体験から、フリーランスエンジニアになるためのノウハウ、ブログや沖縄移住、スリランカの最新情報について発信します。

【CSSセレクタ】超便利! chromeでCSSセレクタを1クリックで取得

※記事内に提携先企業のアフィリエイト広告(リンク、バナー等)、Google広告を含む場合があります

【CSSセレクタ】超便利! chromeでCSSセレクタを1クリックで取得




スクレイピングの際、CSSセレクタを絞り込むのがかなり面倒。

  • この要素だけ欲しい!

  • ピンポイントで指定出来たらいいのに!

f:id:mah666hhh:20200130074537p:plain

と思い、ググっていると見つけました。

超感激です。

Chrome デベロッパーツールの隠し機能が便利!CSSのセレクタ・プロパティ・値を1クリックで見つける方法 | コリス

超便利 && やり方は超簡単です。

手順

  1. opt + cmd + i でchromeのdevtoolを起動します。

  2. 一番左上の角のボタンをクリックします。

  3. CSSセレクタを取得したい要素の上で、右クリックします。

  4. Copyにカーソルを合わせると、Copy selector という項目が出てくるのでそれをコピーします。

これで対象要素のCSSセレクタをコピー出来たので、貼り付けして確認します。

はてなブログの記事編集タイトルだとこんな感じです。

#admin-main > section > div.main-box > table > tbody > tr:nth-child(3) > td.td-entry-title > div > div.entry-table-cell > div.entry-table-entry-title > a

これを目視で追っていくと思うとゾッとしますね...笑

同じようにxpathCopy XPATH でコピー出来ます。

コピーしたCSSセレクタやXPATHを使って、

  • スクレイピング

  • style適用

など、サクッとやっちゃいましょう。

chromeにはまだまだ知らない便利機能が隠れていそうですね。