CSS: Multiple classes for a single element?

[simX]

Is there any way to assign multiple classes to a single HTML element? Here's the deal.

I have some table cells that I want to style. There are like 5 with different colored backgrounds, so that means 5 different styles. But I also want to add another style to some of these cells, which is adding an image to the corner of the cell. So I can make a separate style for that.

But is there a way to assign multiple styles to a single element? That would be ideal, because then I only have to define 6 styles. If there isn't, I have to define 10 different styles. It's not THAT big of a deal, but I was wondering if it could be done for future reference and for simplicity.

I've tried assigning both a class and an ID to a single element, which works. However, you can only use an ID for a specific HTML tag and you can't reuse it (or your page won't validate), so that's not really an option. Well, it works fine if you don't mind having invalid code on your webpage. But I mind, so I'd like a valid, standards-compliant technique.

 

[floyde]

Hmm... I don't know if this will help with your particular problem, but you could add an ID to the table, then add a style to all of its TD's such as:

table#tableID td {
    /*  Your style here */
}

That would be the basic style for all table cells, and then you could add individual styles using classes.

 

[simX]

Hmm... I don't know if this will help with your particular problem, but you could add an ID to the table, then add a style to all of its TD's such as:

table#tableID td {
    /*  Your style here */
}

That would be the basic style for all table cells, and then you could add individual styles using classes.

Yeah, the problem with this is that I need to add the different styles on a cell-by-cell basis. That is, a random assortment of cells will get different background colors, and then a different random assortment will get the image in the corner. So there will be some cells with a background color and image, some with just the background color, a few with just the image, and many with neither. But these groups won't necessarily all fall in table columns or rows.

 

[NoNameBrand]

<td class="allen bettie charlie"> foo </td>

makes any rules applying to

.allen, .bettie, .charlie apply to that <td>. There is a bug in IE which means you can't select two or more at once, like so:

td.allen.bettie {
/* doesn't work in IE */
}

but otherwise it will work as desired.

 

[simX]

Well, well! You learn something new every day... that solution works perfectly, and I didn't know that was how you specified multiple classes.

 

[c-Row]

There is a bug in IE which means you can't select two or more at once, like so:

td.allen.bettie {
/* doesn't work in IE */
}

but otherwise it will work as desired.

But the

<td class"humbl schmumbl">...</td>

part would still work in IE if I define the classes separately? Like

td.humbl {...}

td.schmumbl {...}

?