CSS Selectors In Web Forms

I have a web forms app with a CSS file for layout. One of my elements, which will be much more difficult to do in CSS without using IDs, also has to have runat="server" since I control visibility server side.

<div id="x">
<div id="whatever" runat="server" visible="false">
<div id="y">
....
</div>
</div>
</div>

My problem is that in the CSS, I don't know how to ignore that whatever div with my selectors, and unless I inline the CSS and put in server to client control translation, I won't know the control names until runtime.

#x
{
position:absolute;
height:30px;
}
#x #whatever??? #y img
{
margin:-7px 15px 0 30px;
}
#x #whatever??? div
{
width:250px;
float:left;
}

How should I work around this? Is there a server side container control that doesn't render output but could be used to contol the visibility/rendering of its contents, or is there a trick in CSS to ignore that intermediate div? This is additionally confused by the fact I have the x div in a master page and the whatever and y divs are both in the page itself. I know this wouldn't be an issue if I were using MVC, but at this point switching is not an option.