Jquery UI: How to define different CSS styles for Tabs and Slider on the same page

Question

I have two elements on the same page that are using the same stylesheet: Jquery Tabs and Jquery Slider.

I cannot redefine classes of slider since change of css will affect both elements.

Tabs using these classes:

ui-tabs ui-widget ui-widget-content ui-corner-all

And these are used in Slider:

ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all

How can I modify slider css without modifying one for tabs?

Thanks

Answer 1

Tell your styles what to do :)

css

.ui-slider{
 /* regular used in other areas etc, etc */
}

#mySlider.ui-slider {
/* forced styles, whatever, etc, etc */
}

or use classnames for multiple sliders , like:

.customSlider.ui-slider {

}
.customSlider.ui-corner-all {

}

html

<div id="mySlider" class="slider"></div>
or
<div class="customSlider"></div> 

I should specify on the css:

You can specify more than one qualifier for selectors.. css like this:

#idOfElement.classname {
 /* will only match items with id of "idOfElement" and class of "classname"
  <div id="idOfElement" class="classname" ></div> */
}

div.classname.classname2 {
  /* will only match divs with both classnames:
   <div class="classname classname2" ></div> */
}

hopefully that gives you a good idea of what's going on...