Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Using jQuery Plugins Using a jQuery Carousel The Carousel Challenge Solution

how do I mod styling without effecting second page if I am using a plugin for two different pages in the same project ?

If I change settings for .slick-dots in my main.css it will take effect both in my index.html file and my team.html file. And that is not what I need. What I am trying to do is have different styles for slick-dots class in index.html and team.html. What is the proper way targeting one without the other? Dave seams to separate the project into two different projects, meaning his current workspace does not include home page file at all, as in the previous workspace, and therefore there is no conflict of interests between styling of the plugins class.

1 Answer

LaVaughn Haynes
LaVaughn Haynes
12,397 Points

You could have different stylesheets for each page. Or you could wrap your code on each page in a container with a class or id specific to the page it's on. for example:

//CSS
.main .slick-dots{
    color:  blue;
}
.team .slick-dots{
    color:  red;
}
<!-- main page -->
<div id="container" class="main">
    <!-- page contents and slick dots in here --> 
</div>
<!-- team page -->
<div id="container" class="team">
    <!-- page contents and slick dots in here --> 
</div>

Very cool. Thank You.