Applying css rules if under a specific class or id

Question

Is it possible to define several rules under a class without having to write the class before each time. For example:

.container-class .id-1 // {rules}


.container-class .id-2 // {rules}


.container-class .id-3 // {rules}

Is it possible to avoid having to write .container-class every single time?

Answer 1

Only if you use a preprocessor language like LESS or SASS

With LESS you can write this:

.container-class {

    .id-1 { }
    .id-2 { }
    .id-3 { }

}

To achieve what you want.

You can read more here: http://lesscss.org/

Answer 2

If the rules for all your elements are the same, what you can do at the moment is:

.container-class .id-1,
.container-class .id-2,
.container-class .id-3{
   /*...*/
}

There is an experimental property :any() which could be used.

Selectors Level 4 specifies the pseudo-class :matches().

.container-class :-moz-any(.id-1 .id-2 .id-3){
   /*...*/
}

/* standards compliant*/
.container-class :matches(.id-1 .id-2 .id-3){
   /*...*/
}

Problem with this atm is, that you have to use vendor prefixes which makes this a bit useless, because you have to put each vendor prefix into a separate rule block.

If you have different rules for those elements, you can't group them. You can shorten it with LESS or SASS, but in the end, it still compiles to the verbose form.