CSS more short query

Question

For example I have a CSS selector:

#spotlightPlayer .container .commands.over span,
#spotlightPlayer .container .commands.over ul,
#spotlightPlayer .container .commands.over ul li { clear:both }

Is there a way to write like,

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

Answer 1

Sounds like the problem is with your document structure and not your CSS. Do you really need that long a list of identifiers to get the specificity that you need? You should only need attributes on your HTML elements such as it takes to describe the data you're displaying.

Answer 2

If all you want is to clean up your CSS, and you don't care about making your HTML messy, apply a class to each span, ul, and ul>li element in the relevant section. You can clear out two extra lines of CSS, but you'll be gaining a lot of weight in HTML cruft. I wouldn't recommend this.

Answer 3

You could use some kind of CSS pre-processors like Shaun Inman’s CSS server-side pre-processor to convert this:

#spotlightPlayer .container .commands.over {
    span,
    ul,
    ul li { clear:both }
}

into this:

#spotlightPlayer .container .commands.over span,
#spotlightPlayer .container .commands.over ul,
#spotlightPlayer .container .commands.over ul li { clear:both }

But CSS itself has no such syntax.

Answer 4

You might check out Sass. It has a lot of helpful little features that let you make your style sheets more declarative than the normal CSS syntax allows. It handles deeply nested tags in a very natural way. In Sass, this would be:

#spotlightPlayer .container. commands.over
  span, ul, ul li
    :clear both