/    Sign up×
Community /Pin to ProfileBookmark

Multiple CSS classes on one element!!!!

Copy linkTweet thisAlerts:
Jan 26.2006

IT WORKS, IT REALLY DOES!!!!!!!!!!!!!!!

For as long as I have been working with CSS and HTML (3+ years) I have been extremely frustrated that I couldn’t apply more than one CSS class to an element. You know what, I WAS WRONG!!! I have wasted countless hour duplicating classes in CSS. NEVER AGAIN!! The code below works.

CSS:

[code]
.redText {
color: red;
}
.blueBox {
background: blue;
}
[/code]

XHTML:

[code]
<p class=”redText”>Filler</p>
<p class=”blueBox”>Filler</p>
<p class=”redText blueBox”>Filler</p>
[/code]

The bottom paragraph will contain a paragraph with red text and a blue background!

I realize this might not be big news to a lot of you, but this is something I have not seen an example for in my 3 years of searching the web for CSS / HTML problems. Only by pulling someone elses code apart a few days ago did I see this being used.

I THINK THIS POST SHOULD BE A STICKY!! ?

to post a comment
CSS

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@FangJan 26.2006 — You should have read the [URL=http://www.w3.org/TR/html4/struct/global.html#h-7.5.2]W3C Recommendations[/URL] ?
Copy linkTweet thisAlerts:
@mrtwice99authorJan 26.2006 — You should have read the [URL=http://www.w3.org/TR/html4/struct/global.html#h-7.5.2]W3C Recommendations[/URL] ?[/QUOTE]


I followed your link and read it. And I quote:

The class attribute, on the other hand, assigns one [I][B]or more[/B][/I] class names to an element; the element may be said to belong to these classes.[/QUOTE]
(emphasis mine)

But I didn't notice an EXAMPLE of using two classes. How hard would it be to show one example with:

[CODE]class="red blue"[/CODE]

Anyway, I have work to do... Thanks for sharing!
Copy linkTweet thisAlerts:
@IncaWarriorJan 26.2006 — I love that feature, means I can make things that say class="small red box" where small sets the size, red sets the color and box sets the general attributes, though usually I put colors in something else so I can change them
Copy linkTweet thisAlerts:
@requiembmxJan 27.2006 — i didnt know this, thanks for sharing i couldve used this just the other day
Copy linkTweet thisAlerts:
@JediVictorJan 27.2006 — Thank you for sharing!
Copy linkTweet thisAlerts:
@DorisJan 28.2006 — I love that feature, means I can make things that say class="small red box" where small sets the size, red sets the color and box sets the general attributes, though usually I put colors in something else so I can change them[/QUOTE]

I didnot get the point your trying to say that is you will create 3 different css named small, red, and box....Plz explain it ?
Copy linkTweet thisAlerts:
@FangJan 28.2006 — Look at this:&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;title&gt;classes&lt;/title&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;

&lt;style type="text/css"&gt;
.small {width:3em; height:3em;}
.red {background:#f00;}
.box {border:1px solid #000;}
&lt;/style&gt;

&lt;/head&gt;
&lt;body&gt;
&lt;div class="box"&gt;box&lt;/div&gt;
&lt;div class="small box"&gt;small box&lt;/div&gt;
&lt;div class="small red box"&gt;small red box&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
×

Success!

Help @mrtwice99 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.8,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...