Defining A CSS Selector That Requires A Multi-Class Union
Posted May 4, 2007 at 2:36 PM
Glen Lipka, user interface expert, just taught me the coolest little CSS trick (well not really a trick - more like a CSS fact that I didn't know). I had recently learned that an element could inherit the CSS rules from two different classes:
Launch code in new window » Download code as text file »
- <div class="one two">
- I get the CSS styles from both
- div.one and div.two classes.
- </div>
That in and of itself was very cool and useful. But, what Glen taught me takes that to the next level; apparently, you can define a CSS selector that only applies to a node that has multi-class CSS inheritance. In the following demo (which was really just a test for me to see this bad boy in action), I am creating three paragraphs. The first two get their own class. The third inherits properties of the previous two classes AS WELL AS properties that ONLY apply to it:
Launch code in new window » Download code as text file »
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html>
- <head>
- <title>CSS Test</title>
-
- <style type="text/css">
-
- p {
- padding: 5px 5px 5px 5px ;
- }
-
- p.one {
- border: 1px solid black ;
- }
-
- p.two {
- background-color: gold ;
- }
-
- /* ---- Here's where is gets crazy ---- */
- p.one.two {
- color: white ;
- }
-
- </style>
- </head>
- <body>
-
- <p class="one">
- Only One
- </p>
-
- <p class="two">
- Only two
- </p>
-
- <p class="one two">
- Both One And Two
- </p>
-
- </body>
- </html>
Viewing the above in a browser gives you the following:
| | | | ||
| |  | | ||
| | | |
Notice that the third paragraph gets the border from p.one, the background color from p.two, and then gets its own font color from the CSS selector:
Launch code in new window » Download code as text file »
- p.one.two {}
How cool is that? I am sure a lot of people know this, but this is waaay cool. Man, I love CSS; it just makes the development process so much easier.
Download Code Snippet ZIP File
Comments (13) | Post Comment | Ask Ben | Permalink | Other Searches | Print Page
Two New ColdFusion eCards Available (Including A User Submission!) (Saucy)
ColdFusion Optimizing Case Study: Writing Orders To A CSV File
Reader Comments
Credit where credit is due. I just found out an hour ago.
Originally from Scott Sauyet.
http://scott.sauyet.com/
Posted by Glen Lipka on May 4, 2007 at 2:46 PM
Ben,
Have you taken your code and viewed it in IE 6.0 yet? I'll bet you'll be surprised that the "Only two" text color will be white.
Posted by tony petruzzi on May 4, 2007 at 3:16 PM
oooh crap! You are right. It's funny, cause I tested that in IE6 too :) I think I was just so excited that I didn't notice the font color change. It does this on IE5 on Mac as well (ha ha ha ha ha... IE 5 on mac).
Hmmm, that is lame. I don't have IE7 yet, so can't test that.
Thanks for pointing that out.
Posted by Ben Nadel on May 4, 2007 at 3:28 PM
http://meyerweb.com/eric/css/tests/multiclass.html
:)
Posted by tony petruzzi on May 4, 2007 at 4:17 PM
Awesome test setup. Stupid IE :)
Posted by Ben Nadel on May 4, 2007 at 4:30 PM
It's not that this doesn't work in IE6 at all, it's just very buggy, so I avoid it entirely. It works fine in IE7. As do more advanced CSS 2 selectors.
Posted by Steve on May 5, 2007 at 5:11 PM
Good to know it works nicely in IE7. I haven't taken the jump to upgrade yet (as some of us in the office need to have IE6 for testing purposes).
Posted by Ben Nadel on May 5, 2007 at 6:12 PM
FYI, in case you haven't already seen it, here's the "official" Microsoft solution for running IE6 and 7 side by side:
Posted by Steve on May 6, 2007 at 2:15 AM
Try using this more simply for the technique to work in IE6. If you do like this:
p.red {color: red;}
p.yellow {color: yellow;}
<p class="red yellow">think this works in IE6</p>
I'd appreciate help with testing as I have installed IE7 now. IE5 for mac shouldn't be a concern anymore, it's daft!
Posted by spin on May 8, 2007 at 4:48 AM
Unfortunately, This doesn't achive the goal. We want a CSS statement that acts as an AND operation. In other words, we want certain classes to be applied only if the element has BOTH classes.
so for your example <p class="red yellow">.
Imagine if you had:
p.red {color: red;}
p.yellow {color: yellow;}
p.red.yellow {color:orange} /* works in everything but IE6 */
Its the AND statement that would be so powerful.
Glen
Posted by Glen Lipka on May 8, 2007 at 12:30 PM
Obviously this wouldn't be the best solution in most cases, but if you really wanted you could use JavaScript to apply a third class to elements with the 2 classes in question. E.g., JavaScript turns class="one two" into class="one two one-two", and your CSS selector changes from ".one.two" to ".one-two" or even ".one.two, .one-two". That would work everywhere including IE6.
Posted by Steve on May 8, 2007 at 2:59 PM
Good point on JavaScript, no need to bloat your code with IE specific stuff. Personally I never needed to select both classes together tough.
Posted by Zoffix Znet on May 11, 2007 at 3:45 AM
@Zoffix,
While I have never done that before (and didn't know that I could), it is one of those things where when I see it, I know that I could have used it somewhere :)
Posted by Ben Nadel on May 11, 2007 at 8:38 AM
