How to understand multiple classes in css?

Question

Here is an example that I do not understand:

.container_12 .grid_6,
.container_16 .grid_8 {
    width: 460px;
}

It seems to me that width: 460px is applied to all above mentioned classes. But why some classes are separated by coma (,) and some just by space?

I assume that width: 460px will be applied only to those elements which combine classes in the way mentioned in the css file. For example, it will be applied to <div class='container_12 grid_6'> but it will not be applied to the <div class='container_12'>. Is this assumption correct?

Answer 1

.container_12 .grid_6,
.container_16 .grid_8 {
    width: 460px;
}

That says "make all .grid_6's within .container_12's and all .grid_8's within .container_16's 460 pixels wide." So both of the following will render the same:

<div class="container_12">
  <div class="grid_6">460px Wide</div>
</div>
<div class="container_16">
  <div class="grid_8">460px Wide</div>
</div>

As for the commas, it's applying one rule to multiple classes, like this.

.blueCheese, .blueBike {
  color:blue;
}

It's functionally equivalent to:

.blueCheese { color:blue }
.blueBike { color:blue }

But cuts down on verbosity.

Answer 2

.container_12 .grid_6,
.container_16 .grid_8 {
    width: 460px;
}

width:460px will be only applied to .grid_6 and .grid_8

Edit: Here is a very good article for you

http://css-tricks.com/multiple-class-id-selectors/

Answer 3

Comma groups the classes (applies the same style to them all), an empty space tells that the following selector must be within the first selector.

Therefore

.container_12 .grid_6,
.container_16 .grid_8 {
    width: 460px;
}

applies that style to only class .grid_6 which is within .container_12 class and to .grid_8 class which is within .container_16.

Answer 4

.container_12 .grid_6 { ... }

This rule matches a DOM node with class container_12 that has a descendant (not necessarily a child) with class grid_6, and applies the CSS rules to the DOM element with class grid_6.

.container_12 > .grid_6 { ... }

Putting > between them says that the grid_6 node must be a direct child of the node with class container_12.

.container_12, .grid_6 { ... }

A comma, as others have stated, is a way to apply rules to many different nodes at one time. In this case, the rules apply to any node with either a class of container_12 or grid_6.

Answer 5

The width: 460px; will be applied to the element with the .grid_8 class, contained inside the elements with .container_16 class, and elements with the .grid_6 class, contained inside the elements with .container_12.

The space means heritage, and the comma means 'and'. If you put properties with a selector like
.class-a, .class-b, you will have the properties applied to the elements with anyone of the two classes.

Hope I have helped.
Regards from France ;)

Answer 6

Not exactly what was asked, but maybe this will help.

To apply a style to an element only if it has both classes your selector should use no space between the class names.

For Example:

.class1.class2 { color: #f00; }
.class1 .class2 { color: #0f0; }
.class1, .class2 { font-weight: bold; }

As applied:

<div class='class1 class2'>Bold Red Text</div>

<div class='class1'>Bold Text (not red)</div>

<div class='class1'><div class='class2'>Bold Green Text</div></div>