CSS: Multiple classes for a single element?

Discussion in 'Web Design and Development' started by simX, May 15, 2006.

  1. simX macrumors 6502a

    simX

    Joined:
    May 28, 2002
    Location:
    Bay Area, CA
    #1
    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.
     
  2. floyde macrumors 6502a

    floyde

    Joined:
    Apr 7, 2005
    Location:
    Monterrey, México
    #2
    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:

    Code:
    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.
     
  3. simX thread starter macrumors 6502a

    simX

    Joined:
    May 28, 2002
    Location:
    Bay Area, CA
    #3
    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.
     
  4. NoNameBrand macrumors 6502

    Joined:
    Nov 17, 2005
    Location:
    Halifax, Canada
    #4
    PHP:
    <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.
     
  5. simX thread starter macrumors 6502a

    simX

    Joined:
    May 28, 2002
    Location:
    Bay Area, CA
    #5
    Well, well! You learn something new every day... that solution works perfectly, and I didn't know that was how you specified multiple classes.
     
  6. c-Row macrumors 65816

    c-Row

    Joined:
    Jan 10, 2006
    Location:
    Germany
    #6
    But the

    Code:
    <td class"humbl schmumbl">...</td>
    part would still work in IE if I define the classes separately? Like

    Code:
    td.humbl {...}
    
    td.schmumbl {...}
    ?
     

Share This Page