Examine/toggle CSS pseudo-classes in browser developer tools

Question

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.

Answer 1

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

In Chrome you can check with the Developer Tools the states of some of the CSS pseudo classes, to do that let's take an example from your Bootstrap link:

1. Let's inspect one of the input of the form, then go in the Developer Tools, on the Properties panel (on the right).
2. In this Properties panel you can check the values behind these the pseudo classes:

Pseudo class	Property name	value	Force State exists
:active	N/A	N/A	Yes
:checked	checked	true	No
:default	defaultChecked	true	No
:disabled	disabled	true	No
:empty	childNodes	empty list OR only comment(s)	No
:enabled	disabled	false	No
:focus	N/A	N/A	Yes
:focus-visible	N/A	N/A	Yes
:focus-within	N/A	N/A	Yes
:hover	N/A	N/A	Yes
:indeterminate	indeterminate	true	No
:in-range	validity.rangeOverflow AND validity.rangeUnderflow	false	No
:invalid	validity.valid	false	No
:optional	required	false	No
:out-of-range	validity.rangeOverflow OR validity.rangeUnderflow	true	No
:read-only	readOnly	true	No
:read-write	readOnly	false	No
:required	required	true	No
:valid	validity.valid	true	No
:visited	N/A	N/A	Yes

How can you toggle them?

Although as we have seen above we can check the value of some pseudo-classes, a portion of them are read-only like :valid and :invalid since the browser compute the validity of the input then put the result inside a ValidityState (property object named validity):

BUT for a majority of the properties listed above you can edit the value, to do that easily follow these steps:

1. Do a right click on the element you want to edit the properties (in my case the same input as above) and click at the bottom of the context menu on "Store as global variable":
2. Now in the console you can see the name given by the browser to this new variable:
3. Last, we can edit the desired property to trigger (or "remove") the pseudo-class associated, in my case the :required one:

PS: the global variable(s) created will be automatically deleted when you reload or close the page/tab.