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

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

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

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

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

Mythili said:

How to use CSSClass attribute in ASP.Net

# October 7, 2008 3:09 PM

Venkat said:

I am trying the nested class using include keyword, but not working. Do you have any other example to try this out. I need the solution soon.

# October 9, 2008 5:54 AM

TheRealMattSlay said:

Nesting, basically, was answered already by Anton:

with this method, .foo and .bar are first defined as the same base, then you can add/override other .bar properties further down the code...

.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

# March 27, 2009 2:07 PM

james said:

Well done Andy!! Thanks for it....

# May 29, 2010 5:21 AM

Bursa Sumut said:

a little bit confusing..

but thanx anyway..

# November 12, 2010 10:50 AM