Inheritance question ... part 2: color, inheritence, font, text

by: MaBPosted on 2004-02-04 at 23:04:40ID: 10278370

I don't think you can inherit (or add together) two classes. You can reuse one though.

<h1 class="textcolor1">Heading 1</h1>

I will try to find a way round the "double classes" problem....

BR MaB

by: MaBPosted on 2004-02-04 at 23:07:00ID: 10278380

Done this.

<h1 class="textcolor1 + text1">Heading 1</h1>

Seems to work for me (IE6). Don't now if this is a "legal" way to do it though.

BR MaB

by: Drift3rPosted on 2004-02-04 at 23:10:52ID: 10278402

Well ... I also could use this <h1 class="textcolor1 text1"> Heading 1 </h1>

The problem here is that I wanna do this on an external CSS so that whenever I use <h1> I don't have to put <h1 class = "text1 textcolor1 bold underline (...)"> but only <h1>

This is the whole ideia! ;)

by: MaBPosted on 2004-02-04 at 23:14:43ID: 10278418

OK, just to clearify, you want to use an .css file and in that have the H1 inherit attributes from .textcolor1 and .text1.

by: Drift3rPosted on 2004-02-04 at 23:18:23ID: 10278434

That's it ... the only thing is I think "inherit" is not the best term to apply here. But that's what I wanna do... is it possible?

by: MaBPosted on 2004-02-04 at 23:23:42ID: 10278449

OK. (Agree with inherit not being the best term). Don't know if it's possible. I've never seen it done before, but I will give it a go to see if I can solve it. I'll be back.........

by: Drift3rPosted on 2004-02-04 at 23:24:52ID: 10278455

:)

by: dorwardPosted on 2004-02-04 at 23:53:58ID: 10278552

Match a style to multiple selectors using a comma:

h1, .textcolor1 {
color: #1B3E75;
}

h1, .text1 {
font-size: 10pt;
text-decoration: none;
}

but don't use "pt": http://css-discuss.incutio.com/?page=UsingPoints

by: MaBPosted on 2004-02-05 at 00:06:44ID: 10278610

Nice one dorward.

I've never seen that solution before. Always nice to learn more, thanks.

BR MaB

by: seanpowellPosted on 2004-02-05 at 04:56:24ID: 10279966

If you're not adding any "additional styles" to the h1 tag - you can use multiple class names in the tag itself.

Just separate the class names by spaces:

<html>
<head>
<style type="text/css">

.textcolor1 {
color: #1B3E75;
}

.text1 {
font-size: 10pt;
text-decoration: none;
}

</style>
</head>
<body>
<h1 class="textcolor1 text1">15 pixel text</h1>
</body>

by: MaBPosted on 2004-02-05 at 06:00:54ID: 10280384

-seanpowell

We're ahead of you ;-)

Seriously, nice to have it validated. TX

BR MaB

by: seanpowellPosted on 2004-02-05 at 06:30:23ID: 10280631

Actually I was just showing a different way to handle it - inline as opposed to using multiple selectors up top.

by: MaBPosted on 2004-02-05 at 06:36:41ID: 10280705

I'm probably very tired now but I don't follow you there seanpowell. As I'm always eager to learn more could you please explain what you mean? What's the difference between inline and multiple selectors? (I figure, better look stupid then being stupid ;-) )

BR MaB

by: seanpowellPosted on 2004-02-05 at 06:40:48ID: 10280753

Sure:

Doing this:

h1, .textcolor1 {
color: #1B3E75;
}

h1, .text1 {
font-size: 10pt;
text-decoration: none;
}

<h1>Modified Text</h1>

can also be done like this, without adding the h1, to the beginning of each of the styles:

.textcolor1 {
color: #1B3E75;
}

.text1 {
font-size: 10pt;
text-decoration: none;
}

<h1 class="textcolor1 text1">Modified Text</h1>

by: MaBPosted on 2004-02-05 at 06:54:23ID: 10280893

Yes, see the difference, but that what what was don at the very top of this Q. That was why I didn't follow you. Good to know it's called inline and multiple selectors though. Thanks again.

BR MaB

by: seanpowellPosted on 2004-02-05 at 07:03:16ID: 10280989

...I COMPLETELY missed those comments. Let me just go find that whole so I can crawl back into it. Sorry everyone, and thank god its friday. Well, almost friday.

I don't know how I missed that...

by: Drift3rPosted on 2004-02-05 at 08:22:22ID: 10281679

Still waiting for an answer on this one! ;) anybody?

by: dorwardPosted on 2004-02-05 at 08:33:29ID: 10281788

There is no way, in CSS, to say:

Everything that matches this pattern should be treated as if it also matched that pattern.

You can't inherit one style into another. The only inheritence in CSS is on properties, and they inherit from the parent element in the HTML document. (i.e. <a><b>x</b></a> a { color: red; } b { color: inherit; } - <b> inherits color: red from <a>)

by: Drift3rPosted on 2004-02-05 at 10:06:12ID: 10282700

That's why " ... the only thing is I think "inherit" is not the best term to apply here"

Actually you can do 'inheritance' so to speak in one other way at least:

.red { color: red;}
.blue { color: blue;}

<P class='red blue'>turns out blue</P>

see: http://www.experts-exchange.com/Web/Web_Languages/CSS/Q_20842165.html

So what I'm after here is to see if I can now put them all together in one class.

When you say that "There is no way" do you mean 1) There is no way or 2) There is no way I know of ?

There is a way that I'm avoiding which is in PHP define a variable like:
$h1 = "color1 text1 bold undeline";

and in every <h1 class='<?=$H1?>'> but I was trying to learn if there is a way to do this only with CSS.

by: dorwardPosted on 2004-02-05 at 15:25:08ID: 10285538

<P class='red blue'>turns out blue</P> is not inheritance, its multiple pattern matching.

> When you say that "There is no way" do you mean 1) There is no way or 2) There is no way I know of ?

I mean there is no way.

by: COBOLdinosaurPosted on 2004-02-05 at 16:06:40ID: 10285814

>>>When you say that "There is no way" do you mean 1) There is no way or 2) There is no way I know of ?

Obviously they are the same until you can prove there is a way. The comment makes this look more like an exercise to test rather than a question looking for a solution. If you the only acceptable resolution is to prove it cannot be done the way you want, then there can never be a resolution because such a negative can never be proved, and sometime in the future you may be able to do it the way you desire.

However if this really a search for alternative methods of generating style rules: then this rather inefficient dynamic application of styles client side scripting is, if nothing else, a different way of doing the sheet dynamically:

This looks like not much more than an excercise in

Use the DOM level 2 CSS interface to add the appropriate rule to a style
sheet in the document's HEAD.

IE does it this way:

<html>
<head>
<title>Demo</title>

<script language="JavaScript">

</script>
</head>
<body>
<h3> this is h3 and won't change</h3>
<h1> this is h1 and will change </h1>
<p>
<a href="JavaScript:addRule('h1', 'color:blue')">
this is the link to change it
</a>
</body>
</html>

for mozilla:

<html>
<head>
<title>style addition - Mozilla</title>
<script>
function change() {
var s=document.styleSheets[0];
s.insertRule("h1 {background-color:green}", 0);
}
</script>
<style>
h2 {
background-color:blue;
}
</style>
</head>

<body>
<h2>Test Page</h2>
<h1>change</h1>
<form>
<input type='button' value='change' onclick='change()'>
</form>

</body>
</html>

Unfortunately, the cssRules objects that are exposed do not give enough access to the inner style declarations to migrate across in CSS2.

I don't know about the others in the thread, but when I say "there is no way"; it means "there is no way; but tomorrow is another day".

Right now there is no way but if the CSS3 proposals for scripted attributes get adopted all manner of things will become possible.

Cd&

by: Drift3rPosted on 2004-02-05 at 16:14:11ID: 10285869

I'll leave it open just to see if anybody comes up with some kind of solution/trick to solve this.
Thx.

by: MaBPosted on 2004-03-23 at 04:00:13ID: 10656811

I would say that dorward was the first to answer this question with this solution:

>Match a style to multiple selectors using a comma:
>
>h1, .textcolor1 {
> color: #1B3E75;
>}
>
>h1, .text1 {
> font-size: 10pt;
> text-decoration: none;
>}
>
>
>but don't use "pt": http://css-discuss.incutio.com/?page=UsingPoints

I would like to know why Drift3r doesn't find that a good solution. Otherwise i think the Q should be closed with points to dorward.

BR MaB

by: COBOLdinosaurPosted on 2004-03-23 at 06:51:28ID: 10657900

Dorward IMHO

Cd&

by: Drift3rPosted on 2004-03-23 at 13:58:35ID: 10662298

Mab was the first to try and understand the problem. Dorward was the first to say "it can't be done". COBOLdinosaur gave an alternative way to fix it.

I decided to split the points.

I accepted COBOl's answer cuz it's the answer that leaves space to solve the problem in the future.

Hope everyone agrees ...

by: COBOLdinosaurPosted on 2004-03-23 at 13:59:08ID: 10662299

Glad we could help. Thanks for the A. :^)

Cd&

by: MaBPosted on 2004-03-23 at 22:58:59ID: 10664904

Cd& takes the words from my mouth....

BR MaB

Question

Inheritance question ... part 2

Subscribe now for full access to Experts Exchange and get

Instant Access to this Solution

color

inheritence

font

text

Cascading Style Sheets (CSS)

Trusted by hundreds of thousands everyday for fast, accurate and reliable tech support.

See what Experts Exchange can do for you.

Got a question?

We've got the answer.

Need individual assistance?

Our experts are ready to help.

Want to learn from the best?

Read articles from industry experts.

Working on a long term project?

Store your work and research.

What Makes Experts Exchange Unique?

Trusted by the world's most respected brands.

Faithfully serving IT professionals since 1996.

Related Solutions

Free Tech Articles

Cloud Class Webinars

Join the Community

Give a Little. Get a Lot.

Answers

3 Ways to Join

The Experts

The Experts

Testimonials

Testimonials

Testimonials

Business Clients

Business Clients

In the Press

In the Press

In the Press