title: Examine/toggle CSS pseudo-classes in browser developer tools
body: <p>We have a few dozen <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes" rel="noreferrer">CSS pseudo-classes</a>. Most browsers' developer tools allow us to examine/toggle only a handful of them like <code>:hover</code>, <code>:focus</code>, <code>:active</code>.</p>
  
  <p>How do you examine if a specific element has other pseudo-classes? How can you toggle them?</p>
  
  <p>One example is that <a href="https://getbootstrap.com/docs/4.0/components/forms/#how-it-works" rel="noreferrer">Bootstrap form validation</a> applies <code>:invalid</code> and <code>:valid</code> pseudo-classes to an <code>input</code> 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?</p>
  
  <p>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.</p>