Take the 2-minute tour ×
Programmers Stack Exchange is a question and answer site for professional programmers interested in conceptual questions about software development. It's 100% free, no registration required.

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?

share|improve this question
2  
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. –  Yannis Rizos Dec 1 '11 at 9:41
    
Thank you for the reply –  Cesco Dec 1 '11 at 10:08

1 Answer 1

up vote 1 down vote accepted

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

share|improve this answer
    
Sorry, You're right.. I mispelled them. BTW Thank you for the answer. –  Cesco Dec 1 '11 at 10:07
3  
Actually .style1 .style2 would only match elements with style2 class that are nested inside elements with style1. –  Flygenring Dec 1 '11 at 10:39
2  
And it's .style1.style2 that applies to element with both classes. –  scrwtp Dec 1 '11 at 10:53

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.