CSS more short query

Question

For example I have a CSS selector:

#spotlightPlayer .container .commands.over span,
#spotlightPlayer .container .commands.over ul,
#spotlightPlayer .container .c         


        

Answer 1

So what you effectively want is a 'with'/grouping construct?

I don't think CSS can do this directly, but it's certainly would useful.

It probably would not be too difficult to write a basic script that generated the long-hand version from the shorthand.

However, perhaps a more consistent syntax would be:

@with( #spotlightPlayer .container .commands.over )
{
    span, ul, ul li { clear:both }
}

Whilst longer in this case, it would allow you to add more styles that apply only within that specific block.

edit: or better yet, go with the css pre-processor suggested in the other answer.

Also, regarding Jeremy's answer/comment: Unless you have (or plan to have) a .commands.over item outside of the .container item, then you can drop the middle part.

When you space-delimit your selectors, it allows for any descendant, rather than requiring direct parent/child relationship (like > does).