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?

• yannis: There are several other inconsistencies you'll discover as you learn HTML and CSS. Most of them can be attributed to the fairly inconsistent way both technologies grew: Every browser vendor out there added this and that without conforming to a standard. Sometimes for good reason (lack of a standard), sometimes not. It will get (a lot) worse when you start learning JavaScript.

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.

• Cesco: Sorry, You're right.. I mispelled them. BTW Thank you for the answer.
• Flygenring: Actually .style1 .style2 would only match elements with style2 class that are nested inside elements with style1.
• scrwtp: And it's .style1.style2 that applies to element with both classes.