Home/ Questions/Q 9179153
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T17:43:38+00:00

I’m writing a jQuery script that helps make old sites responsive by applying a

  • 0

I’m writing a jQuery script that helps make old sites responsive by applying a fluid grid system to them.

It’s all working pretty well, except for a few things. Firstly, the plugin and stylesheet are called at the end of the page so the CSS styles SHOULD override whatever else is on the page. However (I think this is due to specificity) when I have:

<div id="header" class="span4">

#header {
float: right;
width: 960px;
margin-left: -5em;
}

[class*="span"] {
display: block;
float: left;
width: 100%;
margin-left: 2.564102564102564%;
}

The #header styles take precedence, even though the .span styles are lower in CSS. I know it’s generally seen as bad form, but is the best/only way to combat this to add !important to each style from my plugin’s stylesheet? They are important and the whole point of using the plugin is to override your current stylesheet, but I’m wondering if there’s a better way.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    An imperfect solution would be to wrap the inner html of the body tag with 2-4 div’s with different id’s, so that the css from the fluid css file is more specific:

    HTML:

    <html>
    <body>
        <div id="wrapper_1">
            <div id="wrapper_2">
                <div id="wrapper_3">
                    <div id="header" class="span4">
                        This is set as red by the main css file, but is rendered as blue, because the fluid css file has more specific declarations.
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

    CSS:

    /* MAIN CSS FILE */
#header {
color: red;
}

/* END MAIN CSS FILE */

/* FLUID CSS FILE */
#wrapper_1 #wrapper_2 #wrapper_3 [class*="span"] {
color: blue;
}

/* END FLUID CSS FILE */

    Here’s a demo: http://jsfiddle.net/j5gt7/

    For more info you can read http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

    This solutions isn’t perfect because the element could have inline styles, or the main css may have selectors with even more then 2-4 IDs which will override the fluid css (or rules set with !important).

    • 0