CODEWITHSUNDEEP
css
D-W
D-W

Reputation: 5341

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.

screenshot

How can I override the style using CSS?

Upvotes: 107

Views: 265783

Answers (8)

user1990587
user1990587

Reputation: 386

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

Upvotes: 1

tesla_coil
tesla_coil

Reputation: 191

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

Upvotes: 4

Kuldar Leement
Kuldar Leement

Reputation: 251

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

Upvotes: 25

ersaloz
ersaloz

Reputation: 71

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.

Upvotes: 7

user2677440
user2677440

Reputation: 61

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

color: #7D7D7D;

to

color: #7D7D7D !important;

That should do it.

Upvotes: 6

Kenta Kubo
Kenta Kubo

Reputation: 79

Use JavaScript.

For example:

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

Upvotes: 0

Ayman Safadi
Ayman Safadi

Reputation: 11552

element.style comes from the markup.

<li style="display: none;">

Just remove the style attribute from the HTML.

Upvotes: 13

DiscoInfiltrator
DiscoInfiltrator

Reputation: 2059

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.

Upvotes: 148

Related Questions