Cancel some CSS Style

Question

For one project, I've to use a defined stylesheet. I cannot edit it, I've to take it as it comes.

But, there is some styles which aren't adequate for this website(e.g. margin).

I've too create my own CSS file which override some of those properties.

One example, if I've this:

<div id="main-content" class="container">My test text</div>

And the following css instruction in a css file:

div.container{margin:5px}
div#main-content{margin-left:235px; ...}

I would like in MY css to define that the div#main-content hasn't this margin but it's default value.

How could I do it? I don't want to do a margin-left:0px because if I've a global style(saying that all div.container should have a 5px margin, I would like it applies to my previous div. And thoses data could change.

Answer 1

As long as your style sheet is after the original one you can use the same selectors in css and it will overide it.

And then just put

div.container{margin:5px}
div#main-content{margin-left:auto;}

Answer 2

You might add another css class, like .no-left-margin

<div id="main-content" class="container no-left-margin">My test text</div>

and add to your css

.no-left-margin{
 margin-left: 0px !important;
}

Answer 3

There's no pure-CSS way to remove a property value declaration without explicitly setting it to another value.

So if you have a situation like this:

 <div id="divA" class="class3 class1"></div>
 <div id="divB" class="class3 class2"></div>

 .class1{margin:2px;}
 .class2{margin:3px;}
 .class3{margin:10px;}

...and you want to cancel the effects of class3 so that divA has margin of 2px, and divB has margin of 5px, your only pure-CSS recourses will involve explicitly referencing each case. I.E. in your overriding stylesheet, you would have to re-assert:

 .class1{margin:2px;}
 .class2{margin:3px;}

...and so on for however many classes/selector contexts may be affected. This is probably unrealistic.

If you're willing to dive into JavaScript, you can actually remove the class-name from the element.

For straight-up JavaScript example of how to do that, see: Remove CSS class from element with JavaScript (no jQuery)

If you want simpler code, and are willing to take on a JavaScript library, jQuery will let you do this in one line like this:

$('divA').removeClass('class3');

Answer 4

Hey now used to this

.container#main-content{margin-left:xxxx; ...}