html - How to set css to a specific selector using jQuery -

consider following html:

<div class="bl-dark separator">     <div class="bl-icon-wrapper">         <div class="bl-icon-border"></div>         <div class="bl-icon-scale-bg dark"></div>         <div class="bl-icon-background"></div>         <div class="bl-icon-dark icon"></div>     </div> </div> 

when click occurs user, selector bl-icon-wrapper have class added using jquery, updated html be:

<div class="bl-dark separator">     <div class="bl-icon-wrapper selected">         <div class="bl-icon-border"></div>         <div class="bl-icon-scale-bg dark"></div>         <div class="bl-icon-background"></div>         <div class="bl-icon-dark icon"></div>     </div> </div> 

now in css have selector filled:

.selected .bl-icon-scale-bg {      // want css added .js here } 

i don't want .bl-icon-scale-bg want this specific selector (.selected .bl-icon-scale-bg) filled.

if wanted add css .bl-icon-scale-bg can .find(), can't specific 1 filled.

the reason why want value of css vary depending on viewport. since requires math values can't calculated simple calc function in css, using jquery required. if there isn't way fill specific css jquery guess have go around other jquery functions.

instead of adding css file should change css using following:

$(".selected .bl-icon-scale-bg").css("prop", "value");