CODEWITHSUNDEEP
csscss-selectors
Gowri
Gowri

Reputation: 16835

Overwrite css class

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?

Upvotes: 0

Views: 5425

Answers (6)

alquatoun
alquatoun

Reputation: 590

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.

Upvotes: 0

Stein G. Strindhaug
Stein G. Strindhaug

Reputation: 5119

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.

Upvotes: 1

Sebastian
Sebastian

Reputation: 1179

Try the important hack:

margin-left: 0px !important;

Upvotes: 0

Alex
Alex

Reputation: 7374

Or, if you really need to switch classes see toggleClass

Upvotes: 0

Felix Kling
Felix Kling

Reputation: 816384

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.

Upvotes: 0

James Allardice
James Allardice

Reputation: 165971

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">

Upvotes: 1

Related Questions