We wish to setup a mobile stylesheet for a client - we can only include one stylesheet due to the system setup.

Each page has an ID and due to the design of the site we would like to be able to target elements in each page slightly differently.

I know we can do this by targeting classes via #home .classname{}, but wondered if there was any way to group a bunch of classes under one prefix rather than individually such as -

 #home{
  .classname1{}
  .classname2{}
  .classname3{}
 } 

I've never read anything about this, just thought it's something that would be really useful in our case and has probably been thought about in the past?

Cheers Paul

• css
• css3

You can use nested styles with Sass or Less. In this case I suggest that you use one extra class of the tree classes are combined very often in your HTML structure, for example when you have columnlike structures.

<div class="classname1 combinedclass"></div>
<div class="classname2 combinedclass"></div>
<div class="classname2 combinedclass"></div>

CSS

.combinedclass {
    // Styles here
}

No, that's not possible. You can use things like Less or Sass which allow you do have nesting like that, but they need to be compiled to CSS.

Other than that, you have to use:

#home .classname1{}
#home .classname2{}
#home .classname3{}

It's not valid way to write CSS in nested style

 #home{
  .classname1{}
  .classname2{}
  .classname3{}
 } 

You can write CSS as below format:

#home .classname1{}
 #home .classname2{}
 #home .classname3{}

You could use

#home .classname1, #home .classname2, #home .classname3
{
}

if you want something applied to all classes or

#home .classname1{}
#home .classname2{}
#home .classname3{}

You are looking for CSS Extension Library. The two most popular are:

1. LESS
2. SASS

Using either one of them, you can combine your style in this way

#home{
  .classname1;
  .classname2;
  .classname3;
 } 

One word: LESS.

Just use less.js while in development and compile to a minified CSS file when pushing to production.