html - apply an external css file to a scoped div tag?

Question

I have a main css file for the whole site called StyleSheetMain.css. I download a slider that has his own style.css file and there is a conflict on some items.I want to scope the slider's css file only to a div that it will contains only the slider items.I dont want to apply this css outside the slider div. Any idea?thanksss

Answer 1

You can make use of CSS Grouping / Nesting.

for example you have:

<div id="main">
    <div id="slider">
    </div>
</div>

<div id="newslider">
    <div id="slider">
    </div>
</div>

for you to change the style for the second slider:

#newslider #slider {
   background: #fff;
}

Answer 2

There is no such thing as scope in CSS. You can't nest a specific chunk of CSS in other CSS. The below code is WRONG and is just an example of what you CAN'T DO.

.some-class {
    /* THIS */
    .some-minor-class {
        /* IS */
    }
    /* WRONG */
}

You also can't point certain .css file to work in only a part of html.

Your solution is simple - rename your classes.

There are so many words to describe this world we live in