javascriptcss-selectorstailwind-csspseudo-element

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")
Solution

  • 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"/>