could one tag have more than one class ?

[runrunforest]

could one tag have more than one class ?

[tripy]

yes

<span class="class1 class2 class3"/>

[RyanReese]

It is possible yet I do not recommend it.

For one thing if you try to assign a background image to each class when you set it up like that, only one will be applied making designing layouts particularly hard. I tend to stay away from multiple classes per element as most cases, you only need one class to do the job.

HTH.

[AutisticCuckoo]

There's nothing wrong with multiple classes. You should be careful about combining classes that declare different values for the same CSS property, but even that's manageable if you know what you're doing.

This contrived example shows a legitimate use for multiple classes:

<cite class="foreign book novel" lang="fr">Les mots</cite>

.book {font-style:italic}
.foreign {color:green}
.novel {font-variant:small-caps}

If you try to avoid multiple classes you may end up with lots of classes that have many declarations in common, which means many places to update if you want to redesign. For instance, you might need classes like english-book, foreign-book, english-novel, foreign-novel, ...

[RyanReese]

Which is why I try to stay away from multiple classes: you could just as easily do something like .books instead of a class for each novel/book (as example from above).

[C. Ankerstjerne]

You're missing Tommy's point. By having three seperate classes, you can combine them in any way. If you have five different classes which describes different variations of a text, which can occur in any combination and in any number, you would need 21 different classes if you wanted to use only one class per tag (many of which will have redundant information). By having five sub-classes, you only have five.

[AutisticCuckoo]

Precisely. Thank you, Christian!

[RyanReese]

Ah true never thought about it that way.

I guess my designs haven't really required such intense measures for that situation to take place.

[oddz]

You should proceed with caution when using multiple classes. If you don't practice a bit of discretion and know your document multiple classes can lead to many frustrating issues. One in particular that rarely happens with ids if the accidental selection of an element. You really need to know your document and information hierarchy to use them effectively in combination. However, once you do I feel the advantages outweigh the disadvantages and that is why I tend to lean towards a multiple class approach. However, if your just beginning this journey I wouldn't say multiple classes are for the faint of heart. Its quit easy to run into specificity and sort order problems when styling if your using combination selectors. It also increasingly easy to override unintended selectors. I would say this is much more so than just using ids and single classes.

[RyanReese]

Really no reason to have more then 3. 5 at absolute max.

[oddz]

That isn't necessarily true.

<div class="gizmo hermit machine cup car house mother">

	<div class="gizmo">
	</div>
	
	<div class="hermit">
	</div>
	
	<div class="machine">
	</div>
	
	<div class="cup">
	</div>
	
	<div class="car">
	</div>
	
	<div class="house">
	</div>
	
	<div class="mother">
	</div>
	
</div>

.gizmo.hermit.machine.cup.car.house.mother {
}

.gizmo.hermit.machine.cup.car.house.mother .gizmo {
}

.gizmo.hermit.machine.cup.car.house.mother .hermit {
}

.gizmo.hermit.machine.cup.car.house.mother .machine {
}

.gizmo.hermit.machine.cup.car.house.mother .cup {
}

.gizmo.hermit.machine.cup.car.house.mother .car {
}

.gizmo.hermit.machine.cup.car.house.mother .house {
}

.gizmo.hermit.machine.cup.car.house.mother .mother {
}

Extreme, but possible.

Exercising discretion isn't nearly as much about the quantity, as it is the reasoning.

[RyanReese]

You misunderstood.
I said you shouldn't NEED it.

There aren't enough CSS properties to the point where you need a seperate class for each. You can make due with a certain number.

[oddz]

There aren't enough CSS properties to the point where you need a seperate class for each. You can make due with a certain number.

huh? CSS properties have nothing to do with it.

[felgall]

See http://javascript.about.com/library/bldraw1.htm for an example where I have 65 divs each with between 1 & 4 classes assigned to it. If each had to have a single class then the CSS would be at least 10 times longer.

[paul_wilkins]

Here is a good article that details the IE6 problem with multiple classes.
Multiple Classes in IE

[runrunforest]

talking about declaring class and inserting class.

CSS:

ul.nobullet {list-style-type:none;} (1)

.nobullet {list-style-type:none;} (2)


HTML

<ul class="nobullet">....</ul>


either way we have to assign class nobullet to ul tag why would some people use the declaration (1), isnt it making thing more complicated ?

[paul_wilkins]

Why people are more explicit when declaring css selectors is that it helps them to understand what parts of the document are being affected than if there was a seemingly random assortment of just class names.

[AutisticCuckoo]

It may be necessary in order to increase the selector's specificity, to make the declaration override another declaration in another rule that affects the same element(s). For instance, if you had another rule like this,

.section ul {list-style-type:square}

If your ul with class="nobullet" resides in an element with class="section", your declaration (2) will have no effect, whereas declaration (1) will, provided that the rule appears later in the style sheet.

Using a type selector instead of an implicit universal selector can also be done to make things clearer, or to avoid having a rule apply where it's not indended to. Imagine the following case,

/* Explicit type selector */
dl.compact dt {float:left; width:8em}
 
/* Implicit universal selector */
.compact dt {float:left; width:8em}

Then imagine a couple of markup scenarios,

<!--Case #1-->
<dl class="compact">...</dl>
 
<!--Case #2-->
<div class="compact">
  <dl>...</dl>
</div>

The rule with the explicit type selector will only apply for case #1, while the rule with the implicit universal selector will apply in both cases. Sometimes that's what you want, sometimes it isn't.

[rochow]

either way we have to assign class nobullet to ul tag why would some people use the declaration (1), isnt it making thing more complicated ?

Are you going to add class nobullet to your <p>?

It's not, its for specificity. Only if it's a ul, then do this. Likewise you can set a different style for the same class because it's on a ol not a ul. There are times to do it, and times not to

[runrunforest]

@Paul we can put

.ul_nobullet

@roch

agree

[AutisticCuckoo]

@Paul we can put

.ul_nobullet

And what if someone decides to use <p class="ul_nobullet">?

[rochow]

And what if someone decides to use <p class="ul_nobullet">?

Why would they? The fact it's called ul_nobullet is presentational enough (though handy admittedly). I can read it and know that it removes the bullets on unordered lists... until someone edits the style, then it's screwed

[runrunforest]

first, the class say nobullet, not highlight, not empahsize, not font, etc...

second, wouldn't any one look at the code of the class before they assign it to a tag ?

[C. Ankerstjerne]

Stephen
Actually, that's a pretty good estimate. Since the formula for the total number of combinations of n number of classes, where the number of classes used can vary from 1 to n and where the order of the classes does not matter, is n^2 - (n - 2), you have (theoretically) reduced the potential number of classes to 9,8 percent (11 / (11^2 - (11 - 2))) by using multiple classes in each tag.

[AutisticCuckoo]

Why would they?

Beats me, but I've seen people do far stranger things. The point was that including the element type within the class name gives no advantage over using an element type selector in the style sheet if you want to restrict the effects to certain element types. In fact, it's a bad idea, since you never know if you'll want to reuse that class for something else in the future. (Although it's unlikely with such a presentational and specific name.)

I can read it and know that it removes the bullets on unordered lists...

Yes, but it will also removed the numbers from an ordered list if applied as <ol class="ul_nobullet">, although the name is then less intuitive.