How do I override inline CSS with Class CSS? [duplicate]


Tags: javascript,jquery,css

Problem :

This question already has an answer here:

I am using jQuery to append an element such as:

var mytop=100;
$(this).appendTo('.container')
       .last()
       .wrap('<div class="action" style="top:' + mytop + 'px;"></div>');

Only mytop is a calculated number. Since the new element has the class action, it should later change the top by adding a class moveup, such as:

$('document').on('click', function(e){
   if($(e.target).hasClass('action')){
      $(this).addClass('moveup');
   }
});

with the CSS as:

.moveup{
   top:5px;
}

The problem is, the inline CSS of the appended <div> overrides the class's CSS. When this newly created item is clicked, it should have its top set at 5px.

How do I override the inline CSS with the Class's CSS?



Solution :

Taken from https://css-tricks.com/snippets/css/style-override-technique/

The !important rule at the end of a value will override any other style declarations of that attribute, including inline styles.

p { 
    font-size: 24px !important; 
}

    CSS Howto..

    How can I have my cards stack on top of one another?

    Simple slideshow not working properly

    How to program the navigation bar(image) web html

    CSS styling - how to put these two div boxes adjacent

    How (and why) to use display: table-cell (CSS)

    How to jump to specific sections of a sprite sheet in css?

    Normalized CSS, option in JSFiddle, how to add it to document

    Apply individual coords to hundreds of div elements with minimal CSS styles, how?

    how to use automatic css hyphens with word-break: break-all?

    how to use struts form fields (s:textfield, s:password) and style them using materializecss framework?

    Conditional css showing limit items

    How to use CSS in Emails (specifically, to design hyperlink button)

    How to create an Hours of Operation list with HTML and CSS?

    how to define multiple classes' hover event in css?

    simple css issue - how to change anchor inside li if li:hover

    CSS: How to bring background image to the front?

    angularjs ui-grid changing column height to auto causes weird line to show up on other columns

    How to align form at the center of the page in html/css

    how to choose what transform is applied first in css

    How to vertically center text span in fixed position div?

    How to fix crispy text in Safari 5 Mac OS X after using css 3d transforms?

    How is font size calculated?

    How to edit .css file from html via jquery

    How to make a button with image inside?

    how to get both icon and heading in same line in css

    How to create a circle with divided borders in CSS and Javascript?

    li:before{ content: “■”; } How to Encode this Special Character as a Bullit in an Email Stationery?

    How do I fix my css floats on IE 6 & 7? Or how can I lay this out better?

    CSS / JS: How do I tell my page to be completely unselectable, except for stuff inside a div?

    How to reapply .css file after UpdatePanel asynchronous call completed