Clash Royale CLAN TAG

What do commas and spaces in multiple classes mean in CSS?

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 a comma (,), and some just by a space?

width: 460px

,

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?

width: 460px

<div class='container_12 grid_6'>

<div class='container_12'>

8 Answers
8

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

.container_12 .grid_6

.grid_6

.container_12

.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

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.

>

grid_6

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.

container_12

grid_6

<space>

>

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.

.grid_6

.container_12

.grid_8

.container_16

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

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

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.

width: 460px;

.grid_8

.container_16

.grid_6

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

.class-a, .class-b

Hope I have helped.

You have four classes and two selectors in your example:

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


So .container_12 and .grid_6 are both classes, but the rule width: 460px will only be applied to elements that have the .grid_6 class which are descendants of an element that have the .container_16 class.

.container_12

.grid_6

width: 460px

.grid_6

.container_16

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>


The above means that you are applying styles to two classes, indicated by the comma.

When you see two elements side by side not separated you can assume that it is referring to an area within an area. So in the above, this style only applies to grid_6 classes inside of container_12 classes and grid_8 classes inside of 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 be effected while the second grid_6 class will because it is contained inside a container_12.

A statement like

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


Would only apply the bold to

tags within areas that have class "description" that are inside of an area with id "admin", such as:

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


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


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

width:460px

.grid_6

.grid_8

Edit: Here is a very good article for you

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

.grid_6

.grid_8

.container_12

.container_16

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.