Question

I have CSS rule like this:

.c1 .c2 .c3 {
   //some css rules
}

Can I apply these rules in one step:

<div class="c1 c2 c3">
   //some web content
</div>

Or I have to make structures like:

<div class="c1">
  <div class="c2">
    <div class="c3">
      //some web content
    </div>
  </div>
</div>

Or maybe there is easier way to do this? I want to apply this rules to single divs and I am not allowed to make changes to css definition file.

Answer 1

.c1 .c2 .c3 matches

<div class="c1">
  <div class="c2">
    <div class="c3">
      //some web content
    </div>
  </div>
</div>

While .c1.c2.c3 (notice the space difference) matches

<div class="c1 c2 c3">
   //some web content
</div>

.c1 .c2 (with space) is the descendant selector: http://www.w3.org/TR/CSS2/selector.html#descendant-selectors

While, .c1.c2 (without space) will match elements that contains both c1 and c2 classes, by chaining two class selectors.

You may also want to look at this: http://css-tricks.com/multiple-class-id-selectors/ and this SO question: Select element based on multiple classes

So in your case, you possibly need to make nested structures.