is there any way to group css styles based on their ids?

Question

If I have a chunk of css styles that are applied within a certain page element, I would like to group them rather than identify the containing page element for each style. For example, I would like to turn:

#bodywrap #leftcolumn p {...}
#bodywrap #leftcolumn div {...}
#bodywrap #leftcolumn .highlight {...}

into something like:

#bodywrap #leftcolumn [
 p {...}
 div {...}
 .highlight {...}
]

where everything contained in the brackets respects the containing declarations. Is this possible with css, and what would be the syntax?

Clarification added: My question is not about the use of ID selectors. it's whether there's any way to simplify construction of multiple styles applied within a containing ID, when creating your stylesheet. if i have 15 styles that are defined within an ID, i'd like to group them rather than write the ID for each style in the stylesheet.

Answer 1

There's a technology available for Ruby called SASS that allows for nesting and other such CSS shorthands; but as for just using plain CSS, no, there is no way to do what you're referring to.

More on SASS: http://sass-lang.com/

Answer 2

In addition to compass (sass), there is http://lesscss.org/.

Compass compiles to css, so even though it's ruby based you can use in any environment. You can use less with either "on the fly" translation or compile .less files to .css.

I've used both and they both significantly improve css organization.

Answer 3

(Yet) another CSS extension that does this is CleverCSS.