Multiple Class in CSS

Damn! Why was I never told, taught, tiped that this is possible and modern browsers support ‘em. The oracle of CSS would be laughing at me for learning this late, yes very late. I had missed an online conference today while trying to get my head around to this trivia, “mutltiple classes” in CSS. I have learnt long back that I can have a class piggybag to an ID but what was troubling me was that I wanted to inherit all properties of a particular class and then apply some sparingly used class to few HTML elements (they appear one or twice in a page while the parent class was appearing many times in a page).

Damn! Why was I never told, taught, tiped that this is possible and modern browsers support ‘em. The oracle of CSS would be laughing at me for learning this late, yes very late. I had missed an online conference today while trying to get my head around to this trivia, “mutltiple classes” in CSS. I have learnt long back that I can have a class piggybag to an ID but what was troubling me was that I wanted to inherit all properties of a particular class and then apply some sparingly used class to few HTML elements (they appear one or twice in a page while the parent class was appearing many times in a page).

What I have been thinking all along was that we cannot apply two classes, well logically thinking, it is not possible to do class=”firstClass” class=”secondClass” inside, say, a single DIV tag. I was very tempted to break the valid standard rule and do an ID=”firstClass” class=”secondClass” but I know I will be breaking my own principle, “stick to the rules”. I ended up nesting DIV tags just to inherit the parent property (that sucks)! And I know of few fallouts if I keep using this technique and that will be particularly with IE (IE are still used by majority of the people, believe me! Some people think Internet means IE, even some seasoned developers/designers have not heard of Firefox).

I have got into this issue before and I wanted to avoid the same here. If the parent container has a background colour and is positioned (relative), then the floated child elements will not show their background (colour or image); and if the child is a floated image, then the whole image disappears. It is there, but “behind” (eh!) the background of the parent element. The solution is to also position the child element ({position: relative}).

Ok, now coming to the point, much to my surprise (I am feeling like a dork now) is that CSS can take in multiple classes, just separate the classes by a whitespace; myClass=”classOne classTwo” (look at the whitespace separating the classes). Ah! you can have more than two classes, yes, multiple classes. Isn’t this good news, now I have some good ideas to shorten my CSS even more.

[Note: Currently no browers serve compressed CSS and whitespace and comments are not striped thus adding to the file size. Let me give Flash a quick Thanks here. Neverthless, whitespaces and comments should be used appropriately so not to make your CSS look like a virgin African forest]


Don't like it? There are lots of published articles, pick a random one.

oCricket

Brajeshwar posted this article on Wed, Aug 11th, 2004 at 9:37 pm
Categorized under Technology

Prev Article: Spammers, the scum of Internet

Next Article: Ashna passes away


Possibly Related Articles

Archives: Visit the Archives for more articles.

Comments Post Yours

There are 7 responses so far. You can follow any responses to this entry through the RSS feed. You can skip to the end and leave a response. Pinging is currently not allowed.

  1. Oh yeah, it’s a great feature.

    Saves file size too.

  2. Thanks! I didn’t know about that either. Do you know which browsers support it?

  3. Peter, it works atleast on IE 5, 5.5, 6.0 on Windows XP/2000 and on the latest release of Firefox, Mozilla, Opera, Netscape 7.2. All those are the browsers I always test on my two machines running 2K and XP. The suspect of of IEs on Mac, if somebody can confirm where and on which version of IE/Mac hits the snag, then it will be helpful.
    (I use to test on IE 4.0 too but I stop testing against it recently)

  4. It works in Safari and IE 5.2 on the Mac as well.

  5. it’s actually in the html spec:

      class  CDATA  #IMPLIED – space-separated list of classes –

    see http://www.w3.org/TR/html401/sgml/dtd.html (Yes, html 4.01) at the core attrs section.

  6. doh! I need better glasses… seems Safari does not support it though IE 5.2 does.

    Sorry for the confusion…

    (and it is according to the HTML spec BTW) (hat tip, Rhesa Rozendaal: http://www.rhesa.com)

  7. I may sound a but dumb in the (x)html/css world, but may ask who is Rhesa Rozendaal (http://rhesa.com/)

Post yours

Sidenotes

Quick notes, scribbles, somehow related to this website and to what I do. Or perhaps I'm just plain lazy to make them into a full article.

Fedora 10 Released

Let's talk history! Fedora was created in late 2003 as a Linux based Operating System which gives the users an admittance from anywhere in the world to the most up-to-date free and open source software ...28th Nov, 2008

Top 25 Hottest Indian Web Companies

Note: User submitted article. Personally, I would advise not to take this video seriously. 21st Nov, 2008

India gets ready for Free and Open Source Software

Over the years, FOSS.in has attracted thousands of participants, and the speaker roster reads like a "Who's Who" of FOSS contributors from across the world. FOSS.in is a non-commercial event organised and run entirely by FOSS ...21st Nov, 2008

Cooliris for the iPhone

Cooliris is the browser extension that revolutionizes the way you view media on your computer. It is now available as an application for your iPhone! Cooliris for the iPhone allows you to search the web ...22nd Oct, 2008

Adobe releases Flash Player 10 (Mac, Win & Linux)

Adobe have released the shipping version of Flash Player 10 for Mac, Windows and Linux. More about Flash Player 10 * About Flash Player 10 * Get Flash Player 10 (Official Release version 10.0.12.36) * Download Debug and Standalone ...15th Oct, 2008

View the Sidenotes Archive

Play the Penguin Game

Recommended

  • Not Safe for Work Ever clicked a link and felt embarrassed with the content in front of your co-workers? Ever caught unaware because the funny link your friend sent was a little beyond funny? Let’s minimize that with NSWF.
  • o! Just Me Of colorful cultures, entertainment, media, life hacks, music, books and movies from hollywood & bollywood.
  • Ode to Apple Dedicated to Apple - Mac, iPhone, iPod, iTunes, Quicktime, Apple TV and all the awesome softwares for the Apple Mac.
  • AS 2.0 Reference Reference for ActionScript 2.0 Programming Language used in Flash. Primarily stashed here for my own personal reference.
  • ActionScript 3.0 Reference Flash/Flex ActionScript 3.0 Reference.
  • Forum Oinam’s technical discussion forum where developers and designers can discuss all technical topics.
  • Downloads All downloads, Free and Open Source.

Download free Brajeshwar Wordpress Theme

Brajeshwar

Brajeshwar I firmly believe in keeping things simple, easy for users and I envison pushing the technical envelop time and again for the betterment of viable commercial and practical applications. More about me.

Brajeshwar's affinity with Adobe

My Photos

More photos on Flickr

Member of 9rules Network

Since its inception on 11th June, 2001, "Brajeshwar" has 903 Articles and 6,149 comments, contained within 21 categories and 1,384 tags.