Is there a way to force a style to a div element which already has a style="" attribute

Question

I'm trying to skin HTML output which I don't have control over. One of the elements is a DIV with a style="overflow: auto" attribute. Is there a way in CSS to force that DIV to use "overflow: hidden"?

Answer 1

As far as I know, styles on the actual HTML elements override anything you can do in separate CSS style.

You can, however, use Javascript to override it.

Answer 2

You can add !important to the end of your style, like this:

element {
    overflow: hidden !important;
}

This is something you should not rely on normally, but in your case that's the best option. Changing the value in Javascript strays from the best practice of separating markup, presentation, and behavior (html/css/javascript).

Answer 3

Have you tried setting !important in the CSS file? Something like:

#mydiv { overflow: hidden !important; }

Answer 4

not sure if this would work or not, haven't tested it with overflow:
overflow:hidden !important

maybe?

Answer 5

If the div has an inline style declaration, the only way to modify it without changing the source is with JavaScript. Inline style attributes 'win' every time in CSS.

Answer 6

Magnar is correct as explained by the W3C spec pasted below. Seems the !important keyword was added to allow users to override even "baked in" style settings at the element level. Since you are in the situation where you do not have control over the html this may be your best option, though it would not be a normal design pattern.

W3C CSS Specs

Excerpt:

6.4.2 !important rules CSS attempts to create a balance of power between author and user style sheets. By default, rules in an author's style sheet override those in a user's style sheet (see cascade rule 3).

However, for balance, an "!important" declaration (the keywords

"!" and "important" follow the declaration) takes precedence over a normal declaration. Both author and user style sheets may contain "!important" declarations, and user "!important" rules override author "!important" rules. This CSS feature improves accessibility of documents by giving users with special requirements (large fonts, color combinations, etc.) control over presentation.

Note. This is a semantic change since CSS1. In CSS1, author

"!important" rules took precedence over user "!important" rules.

Declaring a shorthand property (e.g., 'background') to be

"!important" is equivalent to declaring all of its sub-properties to be "!important".

Example(s):

The first rule in the user's style sheet in the following example

contains an "!important" declaration, which overrides the corresponding declaration in the author's styles sheet. The second declaration will also win due to being marked "!important". However, the third rule in the user's style sheet is not "!important" and will therefore lose to the second rule in the author's style sheet (which happens to set style on a shorthand property). Also, the third author rule will lose to the second author rule since the second rule is "!important". This shows that "!important" declarations have a function also within author style sheets.

/* From the user's style sheet */
P { text-indent: 1em ! important }
P { font-style: italic ! important }
P { font-size: 18pt }

/* From the author's style sheet */
P { text-indent: 1.5em !important }
P { font: 12pt sans-serif !important }
P { font-size: 24pt }