how to set css property of one class from another class

Question

I am applying css style to "body" and to a div which id is "overlay" like:

body
{
    margin:0;
    background:#FEFEFE url(../Images/gradientHeader1.png);
    background-repeat:repeat-x;
}

overLay
{
    background-color:#666666;
    height:1000px;
    left:0;
    opacity:0.5;
    position:absolute;
    margin-top:0;
    width:100%;
    z-index:1003;
}

"overLay" div is inside noscript tag which renders in the browser only when javascript is disabled in the browser.My requirement is that I have to set "overflow:hidden" in the body when "overLay" div get rendered.Can I set overflow property of the body from #overLay?or any other way?

Answer 1

You need to do it the other way around Set the body to what it needs to be when scripting is off and change it with javascript

Answer 2

Yes you can do this without scripting:

<noscript>
    <div id="overLay">whatever</div>
    <style type="text/css">
        body {
            overflow: hidden !important;
        }
    </style>
</noscript>

(You also need a # in your CSS rule: #overLay { ... })