Roman Roman - 23 days ago 11
CSS Question

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?

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

Comments