Override HTML style attribute specificity with CSS

I’ve recently run into a problem when attempting to create a CSS file for print media because some local JavaScript on the page was manipulating the style attributes on the page. Due to specificity issues, it can be very difficult to “correct” the elements to provide proper output. Here’s a new (to me) trick that I just found.

You can override the local style attribute (and any manipulated at runtime with JavaScript) by adding the the [style] modifier to your CSS declaration.

div#someid[style] {
/* your CSS here */
}

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.