Linking a second jquery anything slider on a page to a different CSS

Question

I am trying to use two anything sliders on one page.

I need to style them differently.

I cannot seem to figure out how to call to a second style sheet without causing the second one to override the first one altogether. The URL for the site I am working on is:

http://e4dv3.businesscatalyst.com/home.htm

Answer 1

give one slider uniqe id and reference that in your css:

i.e. put a <div id="top">...</div> around the first slider. then you can use

#top div.anythingSlider .anythingControls ul a {
  background: url("../images/someotherimage.png");
}

to override the default images and classes and it will only apply to the first slider.

You can check out http://www.w3schools.com/css/css_grouping_nesting.asp for more info on nesting