Overwrite css class

Question

I have a css class pause. This is applied in various pages. Only one section of markup doesn't margin-left:42px;, so I want to make it 0px. I don't want to use a new class because I am applying this class dynamically using jQuery for certain conditions.

So, I need to overwrite the class to make margin-left:0px; from markup.

css

.pause a{
         background-image:url(../img/pink_pause.png);float:left;
         height:26px;width:96px; margin-left:42px; margin-top:6px;
         }

markup

<td  class="pause  bid_button_logout bidder_name">
<a href="login"></a>
</td>

How can I neutralize margin-left by any other class or any other way?

James Allardice · Accepted Answer · 2011-06-20 13:42:20Z

1

If you can't define another style, use an inline style on the element that you don't want margin-left applied to. Inline styles are more specific than those defined elsewhere, so it should take precedence:

<a href="login" style="margin-left:0">

answered Jun 20, 2011 at 13:42

James Allardice

166k22 gold badges335 silver badges315 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Stein G. Strindhaug · Accepted Answer · 2011-06-20 13:47:00Z

1

You could split the .pause into two css classes where one of them only defines the extra margin, and simply not apply that class to the ones that don't need margin.

Or set the style attribute on the element like this: style="margin-left: 0;", this will override the css value.

Or you could create anoter class called say ".noMargin" like this:

.noMargin{ margin-left: 0 !important; } 
/* important overrides other class values 
   even if the cascading would not */

and apply that class to the ones you dont want to have the extra margin.

answered Jun 20, 2011 at 13:47

Stein G. Strindhaug

5,1272 gold badges31 silver badges42 bronze badges

1 Comment

Stein G. Strindhaug Over a year ago

Typical when I've finished writing 3 ways of doing it, each method is already answered by several others... heheh

Felix Kling · Accepted Answer · 2011-06-20 13:42:25Z

0

If you want to use inline style:

<a href="login" style="margin-left:0px;"></a>

Or creating a new declaration:

.bid_button_logout a{
    margin-left: 0px; 
}

but this has to come after .pause a.

answered Jun 20, 2011 at 13:42

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

Comments

Alex · Accepted Answer · 2011-06-20 13:44:44Z

0

Or, if you really need to switch classes see toggleClass

answered Jun 20, 2011 at 13:44

Alex

7,3461 gold badge21 silver badges31 bronze badges

Comments

Sebastian · Accepted Answer · 2011-06-20 13:44:52Z

0

Try the important hack:

margin-left: 0px !important;

answered Jun 20, 2011 at 13:44

Sebastian

1,2364 gold badges19 silver badges35 bronze badges

Comments

alquatoun · Accepted Answer · 2011-06-20 13:51:57Z

0

If bid_button_logout or bidder_name are unique to the situation where you want no margin, add margin-left:0px; to either of those classes (but make sure they are after .pause a in your css file. If not, use your conditional jQuery to add an inline style, which will bypass the original left margin style.

answered Jun 20, 2011 at 13:51

alquatoun

5901 gold badge5 silver badges19 bronze badges

Collectives™ on Stack Overflow

Overwrite css class

6 Answers 6

Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related