CSS class inheriting 2

[theEclipse]

Does anybody know if there is a way to specify that one class will inherit the values of another?

ex:

<style>
.foo {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
}

.bar {
	superclass:foo;
	padding-left:10px;
}
</style>

That way, all elements with class foo or bar will have font family and size but only elems with bar will have left padding.

Robert Carpenter
"You and I have need of the strongest spell that can be found to wake us from the evil enchantment of worldliness." - C.S. Lewis (The Weight of Glory)

http://www.robertcarpenter.net

 

[rpgfan3233]

If .bar is a child of .foo, it will automatically inherit all styles unless the styles are explicitly changed. If .bar is not a child of .foo, you have to type each one.

Using the stylesheet in your post (except for the "superclass"), this will work:

<div id="foo">
<p>This is a paragraph with a sans-serif font family and a font size of 10 pixels.</p>
<div id="bar">
<p>This is the same, but has extra padding.</p>
</div>
This doesn't have the extra padding.
</div>

This will not:

<div id="foo">
<p>This is a paragraph with a sans-serif font family and a font size of 10 pixels.</p>
</div>
<div id="bar">
<p>This is not the same; it just has extra padding.</p>
</div>

I hope this helps!

 

[theEclipse]

thats how I understand it too.

Here is an example of what I am looking for:

h1 {
font-family:blah balh blah;
font-weight:700;
text-decoration:underline;
font-size:12px;
}

h2 {
inherit-from:h1;
font-size:10px;
}

h3 {
inherit-from:h1;
font-size:8px
}
[/size]

Then, all of the header tags defined (h1 - h3) will have the weight, decoration, and font family that was explicitly defined for h1.

this way you dont have to change all of them whenever you want to change the decoration that your header has on it.



Robert Carpenter 
"You and I have need of the strongest spell that can be found to wake us from the evil enchantment of worldliness." - C.S. Lewis (The Weight of Glory)

[URL unfurl="true"]http://www.robertcarpenter.net[/URL]

 

[theEclipse]

doh! I am clearly typing to fast for my thought to catch up.

Robert Carpenter
"You and I have need of the strongest spell that can be found to wake us from the evil enchantment of worldliness." - C.S. Lewis (The Weight of Glory)

http://www.robertcarpenter.net

 

[rpgfan3233]

Here ya go:

h1, h2, h3 {
font-family:blah balh blah;
font-weight:700;
text-decoration:underline;
font-size:12px;
}

h2 {
font-size:10px;
}

h3 {
font-size:8px
}

That should do it. The only thing to watch out for is the fact that you have to explicitly change the font size for it to work, or you will see h1, h2 and h3 with the same exact font size.

 

[theEclipse]

lol. thanks. I didnt even think of that.

Soloution=right in front of me.

Robert Carpenter
"You and I have need of the strongest spell that can be found to wake us from the evil enchantment of worldliness." - C.S. Lewis (The Weight of Glory)

http://www.robertcarpenter.net

 

[rpgfan3233]

Yeah, I forgot about it.

I haven't coded in a couple of months, so I'm forgetting some things. Oh wait, it's all coming back to me. . .

"Use the Force!"

LOL

 

[Foamcow]

In case its of any beneift to you in future you can actually apply multiple classes to an element like so

<p class="foo bar">This is a paragraph</p>

So you could set up "foo" with your base styles.
Then set up "bar" and perhaps "bum", "boo" and "baa" with additional style rules.


Now with that said, I will also add that I've never had to do this since it's normally easier and more logical to style actual elements and use inheritence from parent elements.
But you might find it useful.

Foamcow Heavy Industries - Web design and ranting
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
I wonder what possesses people to make those animated gifs. Do you just get up in the morning and think, "You know what web design r

 

[theEclipse]

foamy-
are you sure about that? I dont ever remember seeing that in w3c docs......are you sure its not a browser specific thing?

Robert Carpenter
"You and I have need of the strongest spell that can be found to wake us from the evil enchantment of worldliness." - C.S. Lewis (The Weight of Glory)

http://www.robertcarpenter.net

 

[Foamcow]

yep

there is a small nod to it here

http://www.w3.org/TR/CSS21/selector.html#class-html

Foamcow Heavy Industries - Web design and ranting
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
I wonder what possesses people to make those animated gifs. Do you just get up in the morning and think, "You know what web design r

 

[rpgfan3233]

Just some more info. . .

are you sure about that? I dont ever remember seeing that in w3c docs......are you sure its not a browser specific thing?

class = cdata-list [CS]
This attribute assigns a class name or set of class names to an element. Any number of elements may be assigned the same class name or names. Multiple class names must be separated by white space characters.

<!-- core attributes common to most elements
id document-wide unique id
class space separated list of classes
style associated style info
title advisory title/amplification
-->

There is only one difference in XHTML 1.1 REC and the XHTML 2.0 WD. That is the fact that the class attribute is not character data (CDATA). Instead, it refers to NMTOKENS, which is defined as "One or more white space separated NMTOKEN (A name composed of only name tokens as defined in [link=http://www.w3.org/TR/REC-xml/#sec-common-syn]XML 1.0[/url]) values".

 

[BillyRayPreachersSon]

The multiple class thing is really, really handy... but be aware, that if your target browsder audience involves IE 5.0, then only the last class specified will be picked up.

Found that one about 3 weeks ago (have the bad luck to be working for a company that thinks IE 5.0 and NN 7.0 (the buggiest release going) are the best browsers to be coding for, and don't care that the sites don't work in FF!)

Dan

[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]