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.

check [!important](http://webdesign.about.com/od/css/f/blcssfaqimportn.htm) — Yasser Shaikh, Aug 06 '12 at 12:35

score 4 · Accepted Answer · edited May 23 '17 at 11:43

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');

score 3 · Answer 2 · answered Aug 06 '12 at 11:19

3

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;
}

answered Aug 06 '12 at 11:19

mkk

7,583
7
46
62

There is some css class which are generated by an external library, I would like to keep they names. – J4N Aug 06 '12 at 11:24

score 1 · Answer 3 · answered Aug 06 '12 at 11:18

1

Hey now used to this

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

answered Aug 06 '12 at 11:18

Rohit Azad Malik

31,410
17
69
97

If I do this, I will have to update this margin-left everytime the div.container change. And the margin is the simpliest possibility – J4N Aug 06 '12 at 11:26
Not for now, it's not published yet. But the response of Faust does really show the problem how your answer. – J4N Aug 06 '12 at 15:48

score 1 · Answer 4 · answered Aug 06 '12 at 11:18

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;}

answered Aug 06 '12 at 11:18

Dominic Green

10,142
4
30
34

Will the #main-content margin-left be 5px? Because I don't want to override it, I want to make like it was not here(and then that he takes any other style that match or inherits its value) – J4N Aug 06 '12 at 11:25

Cancel some CSS Style

4 Answers4

Linked