[FIXED] how to get class in javascript with colon syntax for making dynamic class like tailwind css

Issue

i want to make dynamic class for hover , focus ,check and others. but I can't able to get those class format(hover:bg-sky-700) for using colon(:).it shows error in console. please provide an idea to make dynamic class like tailwinds. thank you.

<div class="single-bg bg_amber_5 hover:bg_green"></div>

enter image description here

Solution

If your class name contains reserved characters(., :, # etc.) you need to escape it to avoid ambiguity using CSS.escape:

// be careful you don't want to escape the leading "." since it meant to be indicating a class selector
const element = document.querySelector(`.${CSS.escape('hover:bg_green')}`);
console.log(element);

<div class="single-bg bg_amber_5 hover:bg_green"></div>

Answered By - Hao Wu

Answer Checked By - David Marino (PHPFixing Volunteer)