CSS classes inheritance

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

if you want to apply the same css to 3 classes you have to use comma between selectors as such:

.c1, .c2, .c3 {

}

.c1 .c2 .c3 indicates parent child relation.

This is perfectly valid:

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

The result would be, all the css from c1 and c2 and c3 will be aplied to the div.

Depends on what you want to do. If you simply want to assign css from 3 classes to 1 element, use the above. Avoid making useless wrappers just for styling.

Answer 2

.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.