1. Multiple CSS Classes

    jake on 2004.09.23
    at 07:02 pm

    I'm sort of surprised that I stumbled upon this on Richard@Home. I'm pretty certain in all my travels looking at stylesheets from around the enormous web I've never seen someone use multiple classes in an element. Have many people out there used this before? It's well documented.

    To do it you simply provide a space between the items.


    I have set up an html file for now which demonstrates this. I'll look into something that is a bit more permanent in the grand scheme of things.

    This allows for even more reusable code. I have encountered in the past a situation where I needed to style certain elements while not others, like when you style alternating rows. I used a wrapper where the outer object could have two different classes. The objects were nested in a way that applying it to the unclassed object would have changed many other elements on the page. By using this technique I could have selectively inserted the extra class code and removed the wrapper.

    So far I have tested this on IE 5,5.5,6, Firefox 1.0rc1, and Opera 7.5, all for windows. I will test Apple browsers tonight. It seems to be something that's just not widely used but implemented in modern browsers. I also will hopefully write a second draft which is less hasty.

    Posted in: Design · Web


    Comments (3)

    1. Brent said on 2004.12.05 at 05:16 pm

      multiple CSS classes

      I have been using multiple CSS classes on some of my web sites for a while now (I discovered the technique by experimentation). However, it does not work for me with Firefox.

      I just installed Firefox today, and I don't think it is the RC version. The list of bug fixes for the RC version doesn't mention this CSS fix. Nevertheless, you say that it worked for you?

    2. jake said on 2004.12.05 at 06:16 pm

      We're actually using it on this site for comments. If this comment shows up with a black bar at the top then the multiple CSS classes are in effect.

      I am on version one of Firefox right now and it's working for me.

      My guess is that you have a conflicting CSS class that is overwriting it. It is possible that Firefox is more sensitive to this problem.

    3. Brent said on 2004.12.07 at 04:01 am

      found problem

      After I posted, I did figure out what was wrong. One class was specifying non-zero margins, and the other class was specifying zero margins. In the resulting clash, Firefox simply chose to ignore one of the two classes.



    Comments have been automatically disabled to curtail spam.

by date

« May 2020 »
Sun Mon Tue Wed Thu Fri Sat
          1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30