Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Nested selectors possible?

Nested = { { } }



10:56 pm on Mar 11, 2005 (gmt 0)

10+ Year Member

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.


11:21 pm on Mar 23, 2005 (gmt 0)

10+ Year Member

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


11:29 pm on Mar 23, 2005 (gmt 0)

10+ Year Member

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.


11:44 pm on Mar 23, 2005 (gmt 0)

10+ Year Member

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.


Featured Threads

Hot Threads This Week

Hot Threads This Month