chromeのデベロッパーツールでcssのhoverを調べる方法

概要

cssでサイトのデザインをする時にはchromeのデベロッパーツールでセレクタを確認しながら調整をする事が多いのだが、hoverやactiveの要素を調べるやり方がよくわからなかったので調べてみた。

結果

ググったらすぐ出てきた。

choromeデベロッパーツールを開いてElementsタブを選びさらにStylesを選んだところにある画鋲iconをクリックすると好きな擬似クラスを指定して調べられる。

何度も見かけてたはずの画鋲がこんなに便利だとは知らなかった。