CSS and HTML inconsistent when declaring multiple classes

Question

I'm learning CSS "seriously" for the first time, but I've found that the way you deal with multiple CSS classes in CSS and HTML quite inconsistent.

For example, I learned that if I want to declare multiple CSS classes with a common style applied to them, I write:

.style1, .style2, .style3 {
   color: red;
}

Then, if I want to declare an HTML tag that has multiple classes applied to it, I write:

<div class="style1 style2 style3"></div>

And I'm asking why? From my personal point of view it would be more consistent if both could be declared by using a comma to separate each class, or if both could be declared using a space; after all IMHO we're still talking about multiple classes, in both CSS and HTML. I think that it would make more sense if I could write this to declare a div with multiple classes applied:

<div class="style1, style2, style3"></div>

Am I'm missing something important? Could you explain me if there's a valid reason behind these two different syntaxes?

Answer 1

(I presume you meant to say .style1 .style2 .style3 in your CSS example, otherwise you're referring to tag names.)

In CSS, .style1 .style2 means something completely different from .style1, .style2: the first only applies an element to which has both style1 and style2 classes, the second applies to both style1 and style2 individually. That distinction is vital (don't forget the C in CSS means "cascading"), so there shouldn't be a way of eliminating the need for the comma.

Now, as to why you can't use commas in the HTML element, you may well have a point: unfortunately it's too late to do anything about it.