homepage Welcome to WebmasterWorld Guest from 184.73.40.21
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Nested selectors possible?
Nested = { { } }
webapp

10+ Year Member



 
Msg#: 5947 posted 10:56 pm on Mar 11, 2005 (gmt 0)

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

10+ Year Member



 
Msg#: 5947 posted 11:21 pm on Mar 23, 2005 (gmt 0)

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

jetboy

5+ Year Member



 
Msg#: 5947 posted 11:29 pm on Mar 23, 2005 (gmt 0)

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

10+ Year Member



 
Msg#: 5947 posted 11:44 pm on Mar 23, 2005 (gmt 0)

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved