What do commas and spaces mean in 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 applies to all of the above classes. But why are some classes separated by a comma ( , ), and some just by a space?

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

Answer 1

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

This says: "Make all .grid_6 inside .container_12 and all .grid_8 inside .container_16 460 pixels wide." So both of them will do 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 commas, he applies one rule to several classes like this.

 .blueCheese, .blueBike { color:blue; } 

It is functionally equivalent to:

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

But verbosity is declining.

Answer 2

 .container_12 .grid_6 { ... } 

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

 .container_12 > .grid_6 { ... } 

The input > between them suggests that grid_6 node should be a direct descendant of node with class container_12 .

 .container_12, .grid_6 { ... } 

A comma, others say, is a way to apply rules to many different nodes at a time. In this case, the rules apply to any node with the class container_12 or grid_6 .

Answer 3

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

Cosmos means heritage, and the comma means "and." If you put properties using a selector, such as .class-a, .class-b , you will have properties that apply to elements with either of the two classes.

Hope I helped.

Answer 4

Comma groups classes (applies the same style to them), an empty space indicates that the next selector should be in the first selector.

therefore

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

applies this style only to the class .grid_6 , which is located in the class .container_12 and .grid_8 , which is located inside the .container_16 .

Answer 5

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

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

Example:

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

As applicable:

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

Answer 6

In your example, there are four classes and two selectors:

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

So .container_12 and .grid_6 are both classes, but the width: 460px will only apply to elements that have a .grid_6 class that are descendants of an element that has a .container_16 class.

For example:

 <div class="container_16"> <p class=".grid_6">This has a width of 480px.</p> <p>This has an unknown width.&lt/p> </div> 

Answer 7

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

width:460px will only apply to .grid_6 and .grid_8

Edit: Here is a very good article for you

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

Answer 8

The above means that you apply styles to two classes, indicated by a comma.

When you see two elements side by side that are not separated, you can assume that this refers to the area inside the area. Thus, in the example above, this style applies only to the grid_6 classes inside the container_12 classes and the grid_8 classes inside the container_16 classes.

in the example:

 <div class="grid_6">This is not effected</div> <div class="container_12"> <div class="grid_6"> This is effected. </div> </div> 

The first grid_6 will not execute until the second grid_6 class is because it is contained inside container_12.

Type operator

 #admin .description p { font-weight:bold; } 

Would apply bold to tags

in areas where there is a "description" of the class that are inside the area with the identifier "admin", for example:

 <div id="admin"> <div class="description"> <p>This is bold</p> </div> </div>