How do I override inline CSS with Class CSS?

Question

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?

using `top:5px !important;` but be cautious when using too many `!important` — mylee, Feb 05 '16 at 03:07
`if($(e.target).hasClass('action')){` - should not have `.` before the class name when using with `hasClass` — Arun P Johny, Feb 05 '16 at 03:08
I swear I tried the `!important`, and it didn't work. But retrying it does. Too much coding for tonight... :/ Thank you for your help! — Sablefoste, Feb 05 '16 at 03:10
@ArunPJohny, edited the question; it was a typo as I recreated the example problem. — Sablefoste, Feb 05 '16 at 03:12

score 5 · Accepted Answer · answered Feb 05 '16 at 03:10

5

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

answered Feb 05 '16 at 03:10

MarkP

2,546
5
31
48

Yes, I tried and it does work. Thank you for your quick feedback. – Sablefoste Feb 05 '16 at 03:13
I'm glad I could help. Happy Coding.. – MarkP Feb 05 '16 at 03:15

How do I override inline CSS with Class CSS?

1 Answers1