What does it mean when I have
#A .B,
#A .C { some styles }
Does it mean that class B has no style definitions?
It means both #A .B and #A .C share the same declaration block.
The comma says to apply the declarations in that block to both of those selectors, while the line break after the comma doesn't mean anything special; it's just pure whitespace used to improve readability of the stylesheet.
That's called selector grouping. It'd be a shortcut for:
A .B {some definitions}
A .C {some definitions}
#A .B, #A .C {some definitions}
Let's dissect each selector individually:
First, the comma is used to separate multiple selectors; instead of writing the same style rules for each selector (ex.: once for #A .B and again for #A .C), you can merge the selectors together. This means that the styling definition will be enforced on both #A .B and #A .C rules.
In case you were wondering as well, let's also dissect the #A .B selector:
The spacing between individual selectors (in this case, between #A and .B) represents a descendent relationship, where #A is the ancestor and .B is the descendent. The # symbol is used to represent an element ID where as the . symbol is used to repesent an element's class. This means that the above selector definition is used to find all elements with a class B that is a descendent (not necessarily directly) of the element with an ID A.
In the bigger picture, as the comma is used to merge two selectors sets together, the full selector definition would be: All elements that contain a class B or C that is also a descendent of the element with ID A.
Note: if the element of ID A also contains the class B or C, the styling definition will not be enforced on it, as it must include a descendant relationship between two elements(for this, you would need the selector definition of #A.B or #A.C).
Hope this helps.
It means that the same definitions apply for both - DOM elements that match class B and class C.
