CODEWITHSUNDEEP
css
sanchitkhanna26
sanchitkhanna26

Reputation: 2233

Remove all the styling from elements which have inline styling using CSS

Suppose I have some html like this -:

<div style="blah...blah">Hey Nice</div>
<a style="blah...blah">Great</a>

How do I remove all the inline styling applied to the above elements in my stylesheet considering I don't know what all inline styling exists. Currently I am trying this, but in vain -:

div[style], a[style]{ !important }

Upvotes: 0

Views: 1478

Answers (3)

johnkavanagh
johnkavanagh

Reputation: 4674

If you're not happy with using !important overwrites in the CSS (as suggested by others on here), the only way would be to use JavaScript to remove the styles.

This is really easy in jQuery (better if you're able to assign a class name to the elements to select it with):

$('.selector').attr('style', '');

This will simply replace the element's 'style' attribute with nothing, thus removing the inline styles.

This isn't ideal though since it will rely on the visitor having JavaScript enabled, and may well result in the visitor seeing a style 'flash' as the page loads: the styles assigned in-line to the element before the JS kicks in and removes it.

Upvotes: 0

Barney
Barney

Reputation: 16456

There are several determining factors determining which CSS property prevails in any situation. In order, these are:

  1. Whether the property value has the !important flag or not.
  2. If the style declaration is applied inline via the style attribute.
  3. The strength of the CSS rule selector
    • If the rule has any ID clauses, and if so how many
    • If the rule has class, attribute or pseudo-class clauses, and if so how many
    • If the rule has any tagname clauses, and if so how many
  4. If the property is parsed later in the source than another property with a rule of the same strength

So the only way to override the properties is to make sure that all the properties applied via style are applied elsewhere in your stylesheet, and have the !important declaration. The most rational way to do this is still very awkward — it would involve applying a very specific reset stylesheet, and including !important on every property on every rule.

But even if this is done, you still couldn't override inline style declarations that have !important themselves.

You've told Mojtaba that there should be a better solution, but that better solution would involve designing CSS to break its own rules. Imagine if there was a simpler solution for overriding inline styles from stylesheets designed into the language of CSS — should there also be another solution for simply overriding the override from inline styles? Where does the cycle end? All in all, I'd recommend using Javascript or giving up. Or describing your specific problem in more detail — there may be another solution!

Upvotes: 0

user1823761
user1823761

Reputation:

You must reset all css properties for elements that have style attribute:

[style] {
    position: static !important;
    float: none      !important;
    border: 0 none   !important;
    margin: 0        !important;
    padding: 0       !important;
    outline: 0 none  !important;
    // and so on
}

Upvotes: 1

Related Questions