nested class for jquery ui-slider-handle

Question

I want to assign different background images for each of the jquery sliders vfm-slider and rating-slider.

Here is the code

<div id="slider-content"> 
    <span>VFM</span>
    <div class="vfm-slider"></div>
    <input type="text" class="slider-value"/>
    <div style="clear:both"></div> <span>Heart</span>
    <div class="rating-slider"></div>
    <input type="text" class="slider-value"  />
</div>

.ui-slider .ui-slider-handle  {
    background : url(http://findicons.com/files/icons/2015/24x24_free_application/24/heart.png) no-repeat scroll 50% 50% ;
    border:none;
    #content:"$";
    margin-top: -7px;
    #margin-left: 10px;
    font-size: 1.5em

}

http://jsfiddle.net/tven/JFdQs/

how do i accomplish this please? I am newish to jquery and css in general. And this might be a very intuitive aspect to css class nesting, but I am unable to wrap my head around it right now. Any help is appreciated.

I have tried to use the class name .vfm-slider in conjunction with the .ui-slider and .ui-slider-handle classes . But I would have to nest the latter two under the former. And thats not possible ofcourse.

Answer 1

Use separate rules:

.vfm-slider.ui-slider .ui-slider-handle{
  background : url(heart.png) no-repeat scroll 50% 50%;
}
.rating-slider.ui-slider .ui-slider-handle{
  background : url(rating-image.png) no-repeat scroll 50% 50%
}

I've updated jsfiddle example and it works there: http://tinyurl.com/a67nw67