CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Raja
Raja

Reputation: 219

Override the inline style of the div

I have use the following code snippet to override the inline style of the div.

.gantttoolbar {
    height: 50px;
    display: block !important;
}

Is this correct way to override CSS style? OR Is there any other way to achieve this without using !important in the above code?

Upvotes: 0

Views: 118

Answers (3)

Pushker Yadav
Pushker Yadav

Reputation: 856

Yes , this is right way to override the inline css.

but i recommend don`t override CSS, use css classes and use that rather then inline css. it will save your loading and rendering speed.

Upvotes: 0

Michael Tempest
Michael Tempest

Reputation: 834

There is no need to use the [style] css selector in this case as the element already has a class associated. The [style] only needs to be applied to select elements that do not have a class or id associated with them.

The !important is the only pure css way to override inline styles unfortunately, or you can use javascript to clear the styles on the elements, so that you don't use the important tag. To do that you would do the following:

document.querySelector('.gantttoolbar').removeAttribute('style');

Here is a fiddle http://jsfiddle.net/jRxzH/

Upvotes: 0

Mihey Egoroff
Mihey Egoroff

Reputation: 1542

You can use [style] trick:

.gantttoolbar[style] {
    height: 50px; // Use !important to override height too
    display: block !important;
}

http://css-tricks.com/override-inline-styles-with-css/

Upvotes: 4

Related Questions