Override Inline Styles added via JS with CSS

Question

A js plugin is adding a style that is giving me some headache:

element.style {
     z-index: 100 !important;
}

So i have tried this:

html body div#shell div#shellContent div#bottomPart div#rightCol div.containerBox    
div#embedContainer div#janrainEngageEmbed div.janrainContent div#janrainView   
div.janrainHeader[style] {
    z-index: 1 !important;
}

and still nothing.

Answer 1

Contrary to the other answers, it is possible to override inline styles with CSS:

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

I would guess that the extremely long selector might not be hitting the element.

I had a similar z-index issue with the Janrain plugin that was solved by this:

#janrainEngageEmbed > div[style] {
    z-index: 0;
}

In your case, you probably need:

    z-index: 0 !important;

Answer 2

The inline style will trump any selectors. Either reset the style yourself in javascript or patch the plugin... it doesn't sound like a particularly well written anyway, to be honest. : )