Sponsor: The CSS Anthology
The CSS Anthology: 101 Essential Tips, Tricks & Hacks (external link)
Blog Entry
Working With Two Classes
Published on the 29th of October 2005
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:
XHTML
<div class="one two">...</div>
Then, use the following CSS to apply styling to an element of both classes:
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
-
Daniel Malmqvist (external link) (29 Oct 2005 18:53)
Hmm, would this work if I did this:
CSS
.one {
}
.two {
}And then
XHTML
<div class="one two">...</div> -
Ethan Poole (external link) (29 Oct 2005 18:55)
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.
-
WarpNacelle (30 Oct 2005 10:51)
So what you mean is that your style sheet looked like:
CSS
div.one {...}
div.two {...}
div.one.two{...}Correct?
-
Daniel Malmqvist (external link) (5 Nov 2005 19:10)
Or it could look like:
CSS
.one {
width: 150px;
}
.two {
width: 140px;
}
.one.two {
color: #000;
}I think this would work.
Sponsor: Songbird Media Player
Desktop web player, a digital jukebox, and web browser mash-up. (external link)
