Breadcrumbs

Working With Two Classes

Author
Ethan Poole
Date
Sat 29 Oct 2005 at 17:32

It is very easy to assign an element two classes, as mentioned in the Lowter article, Four Quick CSS Tips. Another neat little tip is assigning styles to an element as long as it belongs to two specific classes.

First, assign the element two classes:

Code: XHTML

<div class="one two">...</div>

Then, use the following CSS to apply styling to an element of both classes:

Code: CSS

div.one.two {
    ...
}

These styles will only be applied to an element that is assigned both classes, one and two in this case. You can also use this method for three, four, etc. classes too. I have found this very useful in quite a few situations.

Comments

  • Hmm, would this work if I did this:

    Code: CSS

    .one {

    }
    .two {

    }

    And then

    Code: XHTML

    ...

    Posted by Daniel Malmqvist (external link) on Sat 29 Oct 2005 at 18:53

  • Yes, you can still do that fine. In the recent situation where I used it, I had to apply styles only if something was of two classes.

    This was the new notes formatting in Lowter's system. The side notes need a width, so when they are of the notes and float-right class it gets a width.

    I'm sure you'll find a situation where you'll use it.

    Posted by Ethan Poole (external link) on Sat 29 Oct 2005 at 18:55

  • So what you mean is that your style sheet looked like:

    Code: CSS

    div.one {...}
    div.two {...}
    div.one.two{...}

    Correct?

    Posted by WarpNacelle on Sun 30 Oct 2005 at 10:51

  • Or it could look like:

    Code: CSS

    .one {
    width: 150px;
    }
    .two {
    width: 140px;
    }
    .one.two {
    color: #000;
    }

    I think this would work.

    Posted by Daniel Malmqvist (external link) on Sat 5 Nov 2005 at 19:10