Examine/toggle CSS pseudo-classes in browser developer tools

57
May 16, 2018, at 3:00 PM

We have a few dozen CSS pseudo-classes. Most browsers' developer tools allow us to examine/toggle only a handful of them like :hover, :focus, :active.

How do you examine if a specific element has other pseudo-classes? How can you toggle them?

One example is that Bootstrap form validation applies :invalid and :valid pseudo-classes to an input element depending on whether it has passed the validation. Suppose we need to debug custom validation rules and feedback by examining and toggling those pseudo-classes. How would you do it in developer tools?

I'm not limiting the question to Chrome DevTools; it's perfectly fine to answer this using any browser developer tools. Likewise, I'm not limiting this question to the specific use case of Bootstrap validation (it's just the first that comes to mind), since that use case covers just two of many other CSS pseudo-classes.

READ ALSO
Customize boostrap-vue in a Nuxt project

Customize boostrap-vue in a Nuxt project

I have a nuxt project where I use bootstrap-vue as a module to style my components

55
JavaFX .setStyle inline sub elements

JavaFX .setStyle inline sub elements

In order to style the background for many elements in JavaFX, you need to use a css file, or to usesetStyle

51
Why are the background images not showing on iphones and ipads?

Why are the background images not showing on iphones and ipads?

I have been trying to troubleshoot this page for what feels like eonstheafropick

74
How do you position an image over top of two divs/containers?

How do you position an image over top of two divs/containers?

I have a web mockup I've been asked to make where a transparent PNG sits on top of two divs multiple times (in multiple rotations)I've built the site using Bootstrap 4

71