Nested selectors possible?

Nested = { { } }

[webapp]

After reading about child selectors in this forum I was thinking... I have have seen this work:

@media print {
 #id { display: none; } /* hide when printing */
 }

So I was wondering if there was something similar where I can nest rules within a parent selector with multiple "{{ }}"... Is this possible or in the works?

It will come in handy if I have page-specific properties of classes that I want to override. I know this can be done with multiple descendant selector definitions -- ex.:

p.intro { width: 400px; }

.alert { color: red; }

#pageid p.intro { width: 200px; }

#pageid .alert { text-align: center; }

But it'd be nice to be able to shortcut with something like this:

p.intro { width: 400px; }

.alert { color: red; }

#pageid {
p.intro { width: 200px; }
.alert { text-align: center; }
/* and a list of other page-specific overrides */
}

I've tried it just to see if it works but no go. I am defining multiple pages in a css file, and have classes that I frequently use. But on some pages, I need to specify just one or two unique properties of these page-shared classes. Any suggestions to better organize CSS definitions in a similar (shortcut) method? Thanks.

[webapp]

Hmm... Does anyone know if something like this in the works for CSS3 at all?

[jetboy]

I think you're hitting an issue that a lot of us have, and the most common approach is to have multiple stylesheets.

One stylesheet has only the styles that apply to *every* page, and linked in after it is a sheet that declares new or overwrites existing styles for either a single page or a selection of pages.

Yes, it means that you're loading in multiple stylesheets for pages that need them, but that's balanced by having a main sheet that's not bloated with page-specific styles.

[webapp]

Thanks for confirming.. I have started using multiple stylesheet for different sections of the site, but I'd like to be able cut down on file size even further. Some page IDs that I use are long:

#pageidsectionsubsectionfunction selector.class { width: 200px; }
#pageidsectionsubsectionfunction selector2.class2 { color: red; }
#pageidsectionsubsectionfunction selector3.class3 { etc: etc; }
#pageidsectionsubsectionfunction selector4.class4 { etc: etc; }

I probably should have abbreviated more, but I have been using filenames for 'simplicity' and descriptive class names. Maybe it's time to start copying Google's and Yahoo!'s practice of using two letter classes and short IDs.