What Do Commas and Spaces in Multiple Classes Mean in Css

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

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

CSS class chaining versus comma separated vs space separated syntax

These selector is worked following code. And these selector's specificity is:

  1. .someclassA.someclassB: 0 2 0
  2. .someclassA .someclassB: 0 2 0
  3. .someclassA: 0 1 0

.someclassA.someclassB {  color: red;}
.someclassA .someclassB { color: blue;}
.someclassA,.someclassB { color: green;}
<p class="someclassA">.someclassA</p><p class="someclassB">.someclassB</p><p class="someclassA someclassB">.someclassA.someclassB</p><p class="someclassA">  <span class="someclassB">.someclassA .someclassB</span></p><p class="someclassB">  <span class="someclassA">.someclassB .someclassA</span></p>

Is placing commas between multiple CSS ID Selectors ok?

The first example is correct, you can legitimately comma separate those selectors

EDITED: @ovokuro is correct BOTH are correct.

The first example would apply a style to three different elements with those three ID's

The second would target the last ID, which is a child of the ID before, which is also a child of the ID before.

Can multiple classes be assigned to an element using a comma?

According to specs the first one is invalid:

class = cdata-list [CS] This attribute assigns a class name or set of
class names to an element. Any number of elements may be assigned the
same class name or names. Multiple class names must be separated by
white space characters
.

The second one is valid.

References

class attribute

Applying CSS rule to multiple class inside a class

As stated here, you pretty much have to use .clear multiple times, like so:

.clear select, .clear input, .clear p, .clear .section-content {
opacity: 0;
transition: 0.2s;
}

Sadly, with CSS alone there is no other way.

Comma in CSS, multiple selectors using the same CSS

.Resource table.Tbl td, .Resource table.Tbl2 td { /* some css*/ }

You should add the full ancestor path for both rules. Not just where you see differences.

What's the difference between CSS classes .foo.bar (without space) and .foo .bar (with space)

I think you got a slight misunderstanding what the first one means.

.element .symbol {}

Means that those CSS settings are applied to any HTML element with the class .symbol that is inside an element with the class .element.

<div class="element">
<div class="symbol" />
</div>

In this example your first CSS entry would affect the <div> tag in the middle.

Your second example means that the first class requires two classes to be affected. Other than that it's equal to the first one.

<div class="element large">
<div class="symbol" />
</div>

So if the HTML looks like this, the CSS values will be applied to the inner <div> tag as well.

If you want to set CSS tags that apply for multiple classes separately then you need to split them up using a comma. So it looks like this:

.element, .symbol {}

Edit: By request the link to the documentation of the CSS selectors.

Difference between space and comma -- CSS property values(not in selector)

Space:

Each value make different function. For example:

font: bold 60px helvetica, arial, sans-serif; 

bold = font-weight: bold;

60px = font-size: 60px;

bold do the weight and 60px do the size, these two are different from each other.

Comma:

helvetica, arial, sans-serif = font-family: helvetica, arial, sans-serif;

Values in comma do the same function. They all change font-family.
In this case:

If helvetica it's not supported then loads arial, if arial it's not supported then loads sans-serif.

Using fonts with two words:

If you use fonts that contains two words and have spaces like Roboto Slab.

For these fonts you have to put them on double quotes "roboto slab".

Example: font: bold 60px "roboto slab", arial, sans-serif;

Dynamic CSS style class that has a space or comma

This is what I have that works but is it working by a fluke or is the right way?

Your examples only work because in these specific examples CSS handles your single class as two separate classes. Especially this one:

<span class="Incomplete, Overdue">Incomplete, Overdue</span>

.Incomplete, .Overdue {
color: white;
background-color: red;
}

only works because of the .Overdue. To use commas and spaces in class names you would have to do it like this: