in

ASP.NET Weblogs

Andy Smith's Blog

Page.RegisterStartupScript('Andy', 'MetaBuilders_WebControls_GainKnowledge();');

html/css class attribute

Ok, maybe everybody else in the whole world knows, but this is what I get for not reading the spec...

I had no idea that you could put multiple css class names in the class attribute seperated by a space, like so:

.foo {
  border: 1px solid black;
}
.bar {
 background: red;
 color: green;
}
class=”foo bar”

Comments

 

M. Keith Warren said:

I knew you could do that, what I wanna know is how you can nest a reference to one class inside another.

.foo
{
include: .bar;
border: 1px solid black;
}
.bar
{
background: red;
color: green;
}
class=”foo” (includes bar)

February 2, 2004 6:25 PM
 

Carson said:

Wow, great tip thanks. I didn't know that either.
February 2, 2004 6:39 PM
 

Mauricio Feijo said:

I didn't know either.. Good call..
February 2, 2004 6:54 PM
 

Walt said:

I learned about it on our last web project. It is a nice enhancement to any project, you can separate your css classes into logical sub-parts. Example - all your colors in classes - all your layout in other classes
February 2, 2004 7:01 PM
 

Johnny Hall said:

I knew you could do it, but I couldn't remember the separator. Space is the last thing I'd expect.
February 2, 2004 7:23 PM
 

Paul Wilson said:

Thanks for the tip.
February 2, 2004 7:25 PM
 

Stefán Jökull said:

w00t w00t!

Didn't know this! Thanks a lot :)
February 2, 2004 7:36 PM
 

Darren Neimke said:

Hmmm, How well is it supported though?
February 2, 2004 8:06 PM
 

Jerry Pisk said:

It's supported very well, I've been using it for about 4 years now and it works like a charm in IE 5+ and Mozilla, Opera seems to have some general style sheets issues (but it looks like it supports multiple class names fine).
February 2, 2004 8:13 PM
 

TrackBack said:

February 2, 2004 10:04 PM
 

TrackBack said:

Andy's found the answer to
February 2, 2004 10:05 PM
 

Edwin said:

I did know about it, but I find it confusing to have more than one css class for an HTML tag. Furthermore, I find it annoying when Dreamweaver 2004 applies style sheets that way.
February 2, 2004 11:08 PM
 

Travis Laborde said:

Wow! Again, thanks Andy!
February 3, 2004 4:37 AM
 

Todd Moon said:

Wow, and I was afraid we were the only ones Andy. :)
February 3, 2004 9:37 AM
 

TrackBack said:

February 3, 2004 10:07 AM
 

TrackBack said:

February 3, 2004 2:26 PM
 

Brian R. James said:

In fact, a good scripter should assume an HTML element may have more than one class.

if (myElement.className == "foo")
{
}
This evaluation will fail because the className == "foo bar", not "foo".

You must use javascript indexOf or other more advanced methods to determine if the 'collection' of classes attached to the element contains "foo".
February 12, 2004 7:03 PM
 

sven muller said:

WeeHoo, thanks Andy!
March 12, 2004 6:08 AM
 

Robert said:

I'm a little bit late as I just added this feed to my list.

What a great thing! This is what I've been missing for a some time! I've had issues with wanting to use linked stylesheets and page-layout with usercontrols. The controls in a usercontrol don't have fixed id's so I couldn't use these. Now I can abuse the multiple class-name to identify a control, while still being able to use general style-definitions!

Because I was bit sceptic, I tried to find this definition at w3c, and even found it!

http://www.w3.org/TR/html401/struct/global.html#adef-class

Thanks Andy!
April 8, 2004 7:44 AM
 

TrackBack said:

April 26, 2004 11:34 PM
 

SomeNewKid said:

Fantastic tip! Well done...
April 30, 2004 10:59 AM
 

Anton said:

Keith, you could write:

.foo, .bar { ... }

...for the more general stuff and then:

.bar { ... }

...for the .bar-specific looks. Hope that helps. It's not an "include" thing but more of an "additive" approach.

/Anton
July 5, 2004 2:51 AM
 

TrackBack said:

This is an interesting blog entry about using classes within CSS. I didn't know you could do this.Find...
March 11, 2005 8:14 PM
 

KnightLife said:

I'm having difficulty implementing the include statement.  Using the example .foo and .bar code posted by M. Keith Warren, the foo class overrides the bar class.

In short, the included class, bar, gets dropped or forgotten.

Anton's posting of his "additive" approach works for me, but the include approach is more elegant.

Suggestions?

P.S.  Incidentally, I'm using IE6

June 6, 2007 4:03 PM
 

mallenb said:

KnightLife, you missed the point of his post. Here's the key part "...what I wanna know is how you can nest a reference to one class inside another. "

His post was a question of how to achieve the include, not a statement of how it works. His example was just to aid in describing his question.

Got it?

August 28, 2007 12:42 PM

Leave a Comment

(required)  
(optional)
(required)  
Add