14

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.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Alexander Abakumov
  • 13,617
  • 16
  • 88
  • 129
  • Dont think in devtools they exist, but this one probably may answer you more: https://stackoverflow.com/questions/10174719/how-can-i-inspect-and-tweak-before-and-after-pseudo-elements-in-browser May be you can use local overrides and test using that by forcing it – Rikin May 15 '18 at 17:14
  • 1
    @patelarpan: But you can't toggle them on demand. – BoltClock May 15 '18 at 17:16
  • @patelarpan: Not sure what's the issue with this case. You manually toggle a pseudo-class via DevTools somehow (checkbox?). Then, if that class is getting reset by some JS or native validation or anything on the page, DevTools just clears that checkbox, so everything is kept in sync reflecting actual element state. – Alexander Abakumov May 15 '18 at 19:19
  • I know it's been a while since this question was posted, but I just found this article on [css-tricks](https://css-tricks.com/custom-state-pseudo-classes-in-chrome/) that might help you. – Millhorn Dec 17 '21 at 21:35

1 Answers1

8

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). enter image description here
  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):

enter image description here

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": enter image description here
  2. Now in the console you can see the name given by the browser to this new variable: enter image description here
  3. Last, we can edit the desired property to trigger (or "remove") the pseudo-class associated, in my case the :required one: enter image description here

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

Ben Souchet
  • 1,450
  • 6
  • 20