Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to find element with querySelector on Tailwind pseudo class name

given I have radio button styled with tailwind class

<input type="radio" class="bg-red-500" checked="checked"/>

I can find the element with JavaScript query selector:

document.querySelector(".bg-red-500")

no big deal👍 it works

But how would I find an emement styled with Tailwind’s pseudo element class names?

<input type="radio" class="checked:bg-red-500" checked="checked"/>

following does not work 🤔:

document.querySelector(".checked:bg-red-500")
document.querySelector(".checked:bg-red-500")
Tags:

2

Answers


  1. 0

    So in Tailwind, pseudo-class variants like checked:bg-red-500 are applied conditionally based on state (e.g when the checkbox is checked), but they aren’t directly reflected in the DOM as a separate class. This is why you cannot select them with something like: document.querySelector(".checked:bg-red-500").

    But you can still query elements based on their state using vanilla JavaScript.

    So to find a radio button that is styled with a checked:bg-red-500 pseudo-class (e.g when it’s checked), you would use attribute selectors or pseudo-classes in your query selector like:
    document.querySelector('input[type="radio"].bg-red-500:checked')

    Login or Signup to reply.
  2. 0

    Search for input[class='xxx']

    const dom = document.querySelector("input[class='checked:bg-red-500']");
console.log(dom)
    <input type="radio" class="checked:bg-red-500" checked="checked"/>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search