/dev tips

🎊   The Modern DevTools course has now started! Visit ModernDevTools.com to find out more   🎊

(1) DevTools Port Forwarding DevTools Copy as cURL (3)

Chrome DevTools: DevTools Triggering of pseudo classes

15 Apr 2015
DevTools Triggering of pseudo classes

Pseudo classes on elements can be triggered to investigate how an element may react if it were to be hovered over for example. You can right click on a node in the Elements panel and select Force element state. Alternatively, the Toggle element state icon can be clicked on in the Styles sub-pane.

When an element has some sort of state applied, you'll get a little visual indicator to the left of the nodes' opening tag and in some cases the closing tag too (if they are far apart).

We can trigger: active, focus, hover & visited pseudo classes.

Sign up to receive a developer tip, in the form of a gif, in your inbox each week.