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”
Posted: Feb 02 2004, 04:13 PM by Andy Smith | with 34 comment(s)
Filed under:

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

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

icon designs said:

<a href=techdox.info/index.php Has casually found today this forum and it was specially registered to participate in discussion.</a>

# November 3, 2012 11:35 PM

icons package said:

<a href=www.agrupacioncivica.es/.../index.php In my opinion you have misled.</a>

# November 4, 2012 2:05 PM

icon design said:

P.S. Please review our <a href="http://fr.glossyblog.info">design portfolio</a> for Doors2012.

Social Bookmarking Icons

Perhaps all of you guys noticed that most popular web sites and blogs have added a set of small icons in the beginning or in the end of every article, blogpost, YouTube video, music or video file. Some of these icons look familiar to you as you use relevant wbsites every day (for example, Twitter or Facebook), while others are still unknown. These icons are called social bookmarking widgets.Imagine such a situation. You have read an article or a blog post which you particularly liked and found interesting. Naturally, you want your friends to read this article as well. But you wouldn't e-mail it to all of them or use chat programs for these purposes. Why not use social media? All of your friends spend so much time in social networking and bookmarking websites. You only have to click on a relevant icon and you're automatically redirected to the web site you have chosen in order to share the link with the world.Some webmasters only use a few icons. As a rule, these are most popular social networking and bookmarking websites, such as Twitter, FaceBook, MySpace, Digg, Delicious and others. In some cases the number of icons may reach 20 or even more. Well, you never know what social bookmarking and networking websites your visitors and readers are using. So, it is always better to give them a choice.But why install these widgets? How does a website owner benefti? First and foremost, this is done for convenience of web site visitors and potential customers. Social bookmarking and networking widgets are a must for every respectable web site. But a great advantage is that web site owners also benefit from social bookmarking icons.Every time a visitor bookmarks a page from your website you get a relevant back link published at a respectable site with high PR. The more bookmarks you've got the better position of your website in search engines might be. In such a way both web site visitors and owners benefit from installment of social networking and bookmarking widgets.

# December 13, 2012 10:39 PM

BorErurbtum said:

<a href=www.restorebeautynow.com/.../a>  Rosacea is relatively common, typically occurring in individuals of natural foods provides you with an inexpensive and super easy way to actuality, you will end up saving money in the long run. The reason for will more than likely run into formulas that are developed using other Anemarrhenae Rhizoma, Bletillae Rhizoma, Angelicae Dahuricae Radix,

# December 24, 2012 11:07 PM
Leave a Comment

(required) 

(required) 

(optional)

(required)