CSS specifity / inheritance issue - css

Question

I'm attaching a 3rd party component to a div element (container). This div element is inside a from and the form has the class cssform. my main css sheet I use contains the definition:
.cssform div {
max-width: 680px;
clear: left;
margin: 0;
padding: 5px 0 8px 0;
padding-left: 155px;
}
My container is now affected by this css which makes the 3rd party component visual unusable.
How can I "overwrite" or "reset" this above css so that it is not applied in any children of my container especially taking into account 3rd party component itself creates div elements below mine also affected from this forms css
EDIT:
The structure is
<form class="cssform">
<section>
<div>
<label></label><input>
</div>
<div id="container"></div>
<div>
<label></label><input>
</div>
<section>
</form>
I fixed this by simply giving all the divs except the container an addtional css class and using that to assign the forms style. that way my container is not affected. I'm not adding this as an answer because it's technical not an answer to my question but a work-around.

Answer 1

If you your div element is, lets say, the third child of its parent container, you can use the pseudo-class :not with :nth-child(3):
.cssform div:not(:nth-child(3)) {
max-width: 680px;
clear: left;
margin: 0;
padding: 5px 0 8px 0;
padding-left: 155px;
}
You may have to edit the selector depending on your entire block of code. But I believe the CSS selector you are looking for is :not(:nth-child(n)).

Answer 2

If you are trying to style only one particular div, the solution depends on which exact HTML structure you have. For example, if the form looks like
<form class="cssform">
<section>
<div>
<div> this one!
<div> but not this one! </div>
</div>
<div> nor this one! </div>
<div>
<section>
</form>
then the css needs to be like this:
.cssform > section > div > div:first-child {...}
Hope this helps.