Getting contextual / descendant selectors to style within snippets

Good css obviously has liberal use of contextual / descendant selectors eg:

#HomePage p {
padding: 20px;
   font-size: 1.5em;
}
#HomePage ul.thumb {
   float: left;
   list-style: none;
}

When editing a snippet, if the snippet contains all the contextual / descendant selectors required for styling, all is OK, and the wysiwyg editor will style its content correctly eg:


<div id="HomePage">
<p>Bla text...</p>
<ul class="thumb">
<li>Item1</li>
<li>Item2</li>
</ul>
</div>


BUT it is ALL TOO EASY for a user to accidentally delete the DIV (eg CRTL+A and Delete), and now your snippet will not style correctly when they reenter text - ie PAGE BROKEN, and a NASTY thing for a webmaster diagnose and to go and fix.

SO, we might try changing the HTML to be thus:

<div id="HomePage">

<p>Bla text...</p>
<ul class="thumb">
<li>Item1</li>
<li>Item2</li>
</ul>

</div>

HOWEVER, now the wysiwyg editor won't pick up the contextual / descendant selectors, and thus the wysiwyg editing NOT ACCEPTABLE from a users perspective.

Is there an answer to this conundrum?
- obviously I could create specific homepage styles for each tag eg ul.thumb-homepage, BUT this is very bad css form.

(nb Having noticed that each snippet within the editor is in fact its own IFRAME with the surrounding HTML of your page stripped out, I can totally see why the wysiwyg editor does not style contextual / descendant selectors correctly.)