| Nested selectors possible?
Nested = { { } } |
webapp
msg:1194556 | 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
msg:1194557 | 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
msg:1194558 | 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
msg:1194559 | 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.
|
|
|
