How can I make my css code to only be applied at specific places in my website?

There are times, when people want to overwrite something on websites, but they are only aware of the strongest overwriting method (using !important;), which overwrites everything else on the website too. You will see an example here, how can you make your code to be only applied to the part, where you actually want your code to be. First you need to know,  how can you use web inspectors to figure out how to check the code of your website. After you got that, here is a html structure example:

<div class="main">
    <div class="container">
        Inner text
        <div class="mydiv">
            Text
        </div>
    </div>
    <div class="second_container">
        Other text
        <div class="mydiv">
            Second text
        </div>
    </div>
</div>

Let's say you want to change the color of "Text". The original code, which gives the color for this text will be:

.main{
    color: blue;
}

Now if you would use this code to overwrite it:

.main{
    color: red!important;
}

That would overwrite every text, so the "Inner text", "Other text" and "Second text" too. Everything inside the "main" class. 

Then you could try to go deeper in the classes:

.mydiv{
    color:red!important;
}

which would be a little bit better, but still you would overwrite the "Second text" too, since that is under the same class. The thing you have to do to make your code only be applied to certain places is, that you should write down the whole structure, to make sure what you write is unique, like this:

.container .mydiv{
    color:red!important;
}

As you see from the "mydiv" classes only the "Text" has "container" as it's parent, so with this code you are only pointing to exactly, where you want it to point.

The next important thing is, that you should not use !important, if you can avoid it. Like in this case you wouldn't need to add it to your code, because for once, your "mydiv" is a closer class to your text, than the original "main" class is, which means it is stronger. Also if you would have the same level selectors, this code would be still stronger, because you specify two parent classes. You can read more about priorities in  here. So all in all, this would be enough:

.container .mydiv{
    color:red;
}

And this would help you avoid "conflicts", like if you would put our slider inside the "mydiv", next to the "Text", we and probably all plugins are using IDs to identify their codes. That can help us to create stronger css codes, because one ID code is still stronger, as this two (or it could be more) level class selector.