Ok, here’s a request I just got, which has bugged me before.

If I want big red text, from classes big and red, I could do the following:

<style type="text/css">
 .red {
  color:red;
 }
 .big {
  font-size:200%;
 }
 </style>
<div class="red big">howdy</div>

No problem.

However, if I now want to underline text which is big and red, I can’t do it.

 <style type="text/css">
 /*red and big*/
 .red && .big {
  text-decoration:underline;
 }
</style>

Obviously, I can do it with subelements, by nesting divs:

 <style type="text/css">
 /*red and big*/
 .red .big {
  text-decoration:underline;
 }
</style> 
<div class="red"><div class="big">howdy</div></div>

However, this is not always useful.  This usually arises when you’re adding a class for a selected state.  I have the classes assigned to links, then add the “selected” class dynamically (or via server-side).  However, I might want the selected class to act differently for different links, controlled by that class.  I can’t do it without subelements, which is unnecessary “cruft” (good word).

So, would this be a good thing to add (extra operator code for CSS selectors), or is this just an ugly hack - and I should really be doing things properly?