Question

I have this markup:

<div id="slider1">
    <div class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">
        <a style="left: 0%;" class="ui-slider-handle ui-state-default ui-corner-all" href="#"></a>
    </div>
</div>
<div id="slider2">
    <div class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">
        <a style="left: 0%;" class="ui-slider-handle ui-state-default ui-corner-all" href="#"></a>
    </div>
</div>

What i want is different style elements for the two elements. They are contained in outer div with different id’s. Is this possible? And also this markup is auto generated by the jqueryui plugin so i can’t modify it.

Answer 1

you can write

#slider1 .ui-slider{
    //styles;
    !important;
}

#slider2 .ui-slider{
    //styles;
    !important;
}

By writing !important it’ll override auto generated styles..