homepage Welcome to WebmasterWorld Guest from 54.235.16.159
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

This 47 message thread spans 2 pages: < < 47 ( 1 [2]     
How to specify multiple classes for one element
(or multiple inheritance the css way)
grahamstewart




msg:1197760
 11:36 am on Apr 30, 2003 (gmt 0)

The wool has been lifted from my eyes. I was blind and now I can see. Everything is clear to me now.

Papabaer just casually mentioned this in another thread [webmasterworld.com], but it was such a complete revelation to me (and several other forum members, including Nick_W) that I felt it deserved its very own thread.

Say you have a class for 'framing' your elements. Something like..

.framed {
border: 1px solid #ccc;
margin: 10px;
padding: 0;
}

..and now you decide that you'd like to have something framed and floated to the left. In the past I would have either specified this in the style="" attribute of the element or I would have created a new 'framedleft' class that included the old rules and added float:left

But instead you can do this: define a new class..

.left {
float: left;
}

..and then combine the two in the html like this..

<img class="framed left" src="apic.gif">

Obviously this is a trivial example. You can make the rules much more complex and specify as many classes for each element as you like.

I have previously moaned to other developers about the lack of inheritance in CSS, but how little did I know. I take it all back. This is like multiple inheritance with wings.

All hail papabaer - the bringer of new knowledge to old minds!

 

Unversed




msg:1197790
 8:19 am on May 2, 2003 (gmt 0)

.left, .right, .navmenu, .navmenu-r, .navtext, .navtext-l, .tinytext, .searchbox, .searchbutton{font-family:Arial, Helvetica, sans-serif}
.left{font-size:100%;text-align:left}
.right{font-size:100%;text-align:right}
.navmenu{font-size:75%;text-align:left}
.navmenu-r{font-size:75%;text-align:right}

Could something using "navmenu-r" be consolidated to "navmenu right"?

No and "right navmenu" wouldn't help either. It would just take the settings for the last class listed. If you left the font-size out of .left and .right, then you'd be in business.

I've been using multiple classes for a while now but gave up on sites where NN4 support is still required. I'd assumed that using more than 1 class was a CSS2 thing, but I just looked and can't find it in the spec. Anyway, multiple classes does NOT work in Netscape 4, but if you don't care what 3% of your visitors see, go ahead.

grahamstewart




msg:1197791
 9:09 am on May 2, 2003 (gmt 0)

I'd assumed that using more than 1 class was a CSS2 thing, but I just looked and can't find it in the spec.

Its an HTML thing and it's in the spec [w3.org].

Oaf357: There is no point in specifying font-size: 100% anyway so ditch it and it will work.

Suzy: Sorry, didn't mean to sound critical, I was just trying to make the point that if we break things down to far with classes then they become pointless. My example wasn't much better!

Didn't know <q> wasn't properly supported in IE - that sucks. I guess its because IE doesn't handle the :before and :after rules - but they could have at least faked it. :)

Nick_W




msg:1197792
 9:15 am on May 2, 2003 (gmt 0)

>Its an HTML thing

Wow! - Obvious whan it's pointed out but I would have been looking through the CSS specs for that one too! ;)

Regarding <q>

Yep, it does indeed SUCK.
I've not really used it but on an ongoing project I'm planning on just styleing the <q> tags as italic and a different color (i beleive this was mentioned?) and seeing if it makes the point.

I think it will.

We can't keep bowing down to IE's inadequacies IMO, not saying ignore them, but finding away to use such excellent tags as <q> and live with it is a better option than ignoring such mark up.

Just my 2p ;)

Nick

Hester




msg:1197793
 9:42 am on May 2, 2003 (gmt 0)

Anyway, multiple classes does NOT work in Netscape 4, but if you don't care what 3% of your visitors see, go ahead.

Sadly Netscape 4 users are still viewing our site. The latest web stats for April 2003 give me a breakdown as follows (when collated in Excel):

Netscape 4 = 1894 (6%)
Netscape 6+ = 4797 (14%)
Internet Explorer 5+ = 26428 (80%)
Other = 131 (0%)
Opera = not listed!

However, the Netscape 6+ figures include a majority from myself using Mozilla to test the site, and Netscape 4.8 is probably me as well.

The "Other" list is interesting - it has "LinkLint-checkonly/2.1", whatever that is, and "MSProxy/2.0" - any ideas?

Actually the figures are better than ever. I know 400 users have recently been upgraded to Netscape 6.2. It gave me a headache as our site did not work in it! There was a bug that affected our doctype, so I had to split it onto 3 lines to make it work. Why they went for 6.2 and not Netscape 7 is beyond me but at least they're no longer on 4!

I believe Cardiff University have recently switched over to Opera. I did a lot of testing in Opera 6 but I need to do some more in Opera 7 incase anyone from there looks at our site.

grahamstewart




msg:1197794
 9:59 am on May 2, 2003 (gmt 0)

"Opera = not listed!"

Unfortunately good figures for Opera usage are hard to come by because you can change what browser it identifies itself as through the Quick Preferences menu and many people have this set to IE.

Bit of a double edged sword: it avoids it being targetted by Microsoft FUD campaigns, but at the same time no one knows how important Opera support is.

6% is quite high for NN4 - the norm seems to be about 2% [upsdell.com] but higher in educational and government.

Why they went for 6.2 and not Netscape 7 is beyond me but at least they're no longer on 4!

LoL! Netscape 6.2 was probably the latest and greatest when they started the rollout. A classic Stone of Sisyphus [britannica.com]. :)

Hester




msg:1197795
 10:29 am on May 2, 2003 (gmt 0)

Two points: 1) My stats don't allow me to view the full list of user agents, only the top 15.

2) The change from NS4 to NS6.2 only happened a couple of weeks ago! Hence my bewilderment as to why NS7 was ignored. (Is it not as secure?) I reckon IT departments have to leave a program for about a year to see if any critical security issues come to light before they can allow it to be installed. If this is so, well any security holes will have been fixed in the newest release, so why not use that!

kapow




msg:1197796
 3:33 pm on May 2, 2003 (gmt 0)

So does it work on <div id="one two three">
as well as <p class="one two three">?

Oaf357




msg:1197797
 8:06 pm on May 2, 2003 (gmt 0)

There is a point in specifying the font-size if you want to use a class that doesn't inherit font sizes.

SuzyUK




msg:1197798
 8:34 pm on May 2, 2003 (gmt 0)

kapow
Yes it will work....simple example follows:

CSS:
.one{color: red;}
.two{font-weight: bold;}
.three{font-style: italic;}

HTML:
<p class="one">this is just red</p>
<p class="one two">this is red and bold</p>
<p class="one two three">this is red, bold and italic</p>

Suzy

grahamstewart




msg:1197799
 10:31 pm on May 2, 2003 (gmt 0)

There is a point in specifying the font-size if you want to use a class that doesn't inherit font sizes.

We're both right :)

A percentage or em based font-size is always relative to the font-size of the container so setting it to 100% won't stop that happening..


<div style="font-size: 50%">
Some 50 percent text
<div style="font-size: 100%">
More 50% text
</div>
</div>

But if you meant inheriting from some definition of .left that wasn't in your example and appears further up the cascade then yeah, your right, fair enough.

Oaf357




msg:1197800
 1:02 am on May 3, 2003 (gmt 0)

I don't think I'm going to be tinkering with this too much right now anyways (thanks to NN4). But, it's very useful knowledge. Thanks.

papabaer




msg:1197801
 2:10 am on May 3, 2003 (gmt 0)

CSS:
.one{color: red;}
.two{font-weight: bold;}
.three{font-style: italic;}

HTML:
<p class="one">this is just red</p>
<p class="one two">this is red and bold</p>
<p class="one two three">this is red, bold and italic</p>

And even this, lest we forget:

CSS:

#featued-items p {
font: 0.9em Georgia, "Book Antiqua", palatino, serif;
color: #666;
}

#featured-items a {
font-variant: small-caps;
}

.one{color: red;}
.two{font-weight: bold;}
.three{font-style: italic;}

HTML:
<p class="one">this is just red</p>
<p class="one two">this is red and bold</p>
<p class="one two three">this is red, bold and italic</p>

<div id="featured-items">
<p class="one two">Today's Specials include...</p>
<p><a href="featured.next.htm">Tomorrow's preview</a></p>
<p class="one two three">Tonight only! Don't miss...</p>
</div>

papabaer




msg:1197802
 2:16 am on May 3, 2003 (gmt 0)

A percentage or em based font-size is always relative to the font-size of the container so setting it to 100% won't stop that happening..

Ahem!--bad joke alert!

What'd one EM say the other EM?

... Who's your Daddy!

<q cite="papabaer">Q rocks!</a>

Oaf357




msg:1197803
 3:05 am on May 3, 2003 (gmt 0)

That was terrible, papabear.

Nick_W




msg:1197804
 7:08 am on May 3, 2003 (gmt 0)

Lowering the tone agian PB?

Groan, groan groan....... ;)

Nick

killroy




msg:1197805
 9:58 am on May 3, 2003 (gmt 0)

Well there is one place where multiple inheritance will rule supreme, funny nobody mentioned it.

I tend to design my sites with perhaps 4 major colours in the colour scheme.
Each may be used as foreground or backgroud color.

To define thim in only one location I'd have definitions like this:

#id1,#id2,.class01,.class02{
background-colour:#color1;
}
#id3,#id4,.class03,.class04{
background-colour:#color2;
}
#id1,#id4,.class02,.class03{
colour:#color3;
}

So I had each colour only once in the CSS. Problem is each tiem a new ID or class used a colour I had to add it to these rules, PLUS further down again with wahtever other styles they required,

Worse, If I had a seperate stylesheet for a particular page that added new items, I had to repeat the colour definitions, and to change the colours I had to change them once in each CSS.

Now I can just write:

.co1bk{background-color:#color1}
.co2bk{background-color:#color2}
.co1{color:#color1}
.co2{color:#color2}

and then I could have for example:
<div id="nav" class="topnav co1bk co2"></div>
For a div of ID:nav and class:topnav that has background colour 1 and foreground colour 2.

Seems like the perfect solution for ceeping colours seperate.

Could even place them in a seperate stylesheet :)
Thanks for pointing this out, I'd have never found it myself, havenT' yxet read the CSS spec cover-to-cover ;)

SN

killroy




msg:1197806
 11:13 am on May 3, 2003 (gmt 0)

I just realized that this does not do exactly what I want to achieve.

Logically I want to say, this DIV is a top navigation bar (<DIV class="topnav">) and the top navigation bar uses background color 2 (<DIV class="topnav co2bg">).
But that dactually says: this DIV is a top navigation bar using background color2, while the definition of top navigation does not say ANYTHING about the color. This would indicate that I could have different top navitgation bars, usign different colours, which is NOT what I want to do...

What I REALLY want to do is more like:

.co2bk{
background-color:red;
}

.topnav{
@inherit: .co2bk;
display:block;
border:1px solid;
}

of course the @inherit doesn't work like that...

but if it did, I could now use <DIV class="topnav"> in my HTML code, and simply change the inherit rule to use one of the other predefiend colours.

In a way I'm defining aliases for the colours so I have to define and change them in only one location.

Is there a way to do this with the current CSS3 spec?

SN

This 47 message thread spans 2 pages: < < 47 ( 1 [2]
Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved