Пользовательский интерфейс Jquery: как определить разные стили CSS для вкладок и слайдера на одной странице

Question

У меня есть два элемента на одной странице, которые используют одну и ту же таблицу стилей: Jquery Tabs и Jquery Slider.

Я не могу переопределить классы слайдера, так как изменение CSS коснется обоих элементов.

Вкладки, использующие следующие классы:

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

И они используются в Slider:

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

Как мне изменить слайдер css, не изменяя его для вкладок?

Спасибо

Answer 1

Расскажите своим стилям, что делать:)

CSS

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

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

или используйте имена классов для нескольких ползунков, например:

.customSlider.ui-slider {

}
.customSlider.ui-corner-all {

}

HTML

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

Я должен указать на CSS:

Вы можете указать более одного квалификатора для селекторов .. css вот так:

#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> */
}

надеюсь, это даст вам хорошее представление о том, что происходит ...