Override element.style using CSS

I have an HTML page from page builder, and it injects style attribute directly to the element. I found it's considered as element.style.

I want to override it using CSS. I can match the element, but it doesn't override it.

How can I override the style using CSS?

8 Answers

Although it's often frowned upon, you can technically use:

display: inline !important; 

It generally isn't good practice but in some cases might be necessary. What you should do is edit your code so that you aren't applying a style to the <li> elements in the first place.

This CSS will overwrite even the JavaScript:

#demofour li[style] { display: inline !important; } 

or for only first one

#demofour li[style]:first-child { display: inline !important; } 

element.style comes from the markup.

<li> 

Just remove the style attribute from the HTML.

Of course the !important trick is decisive here, but targeting more specifically may help not only to have your override actually applied (weight criteria can rule over !important) but also to avoid overriding unintended elements.

With the developer tools of your browser, identify the exact value of the offending style attribute; e.g.:

"font-family: arial, helvetica, sans-serif;" 

or

"display: block;" 

Then, decide which branch of selectors you will override; you can broaden or narrow your choice to fit your needs, e.g.:

p span 

or

section.article-into.clearfix p span 

Finally, in your custom.css, use the [attribute^=value] selector and the !important declaration:

p span[style^="font-family: arial"] { font-family: "Times New Roman", Times, serif !important; } 

Note you don't have to quote the whole style attribute value, just enough to unambigously match the string.

Using !important will override element.style via CSS like Change

color: #7D7D7D; 

to

color: #7D7D7D !important; 

That should do it.

you can override the style on your css by referencing the offending property of the element style. On my case these two codes are set as 15px and is causing my background image to go black. So, i override them with 0px and placed the !important so it will be priority

.content { border-bottom-left-radius: 0px !important; border-bottom-right-radius: 0px !important; } 

Use JavaScript.

For example:

var elements = document.getElementById("demoFour").getElementsByTagName("li"); for (var i = 0; i < elements.length; i++) { elements[i].style.display = "inline"; } 

As per my knowledge Inline sytle comes first so css class should not work.

Use Jquery as

$(document).ready(function(){ $("#demoFour li").css("display","inline"); }); 

You can also try

#demoFour li { display:inline !important;}