CSS shorter request

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 for example

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

Answer 1

You can use some CSS pre-processors, such as the server-side pre-processor Shaun Inmans CSS , to convert this:

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

in it:

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

But CSS itself does not have this syntax.

Answer 2

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

I don't think CSS can do this directly, but that would certainly be helpful.

It would probably not be so difficult to write a basic script that generated a long version from shortened text.

However, perhaps a more consistent syntax would be the following:

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

Although longer in this case, this will allow you to add more styles that apply only within this specific block.

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

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

When you limit the space in your selectors, it allows any descendant, rather than requiring a direct parent / child relationship (e.g. > ).

Answer 3

You can check out Sass . It has many useful features that make your style sheets more declarative than regular CSS syntax allows. It processes deeply nested tags in a very natural way. In Sass, it will be:

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

Answer 4

If you want to clean your CSS and you don't care about making your HTML useless, apply a class to each span , ul and ul>li element in the corresponding section. You can clear two extra CSS lines, but you will get a lot of weight in the HTML crack. I would not recommend this.

Answer 5

It seems the problem is with your document structure, not your CSS. Do you really need such a long list of identifiers to get the specifics you need? You only need the attributes of your HTML elements, for example, to describe the displayed data.