Stylesheets - css class inheritance

Author

css class inheritance

Lee

2005-09-22, 7:48 pm

I'm a newbie to CSS and I'm wondering if there is a way to implement
inheritance in a way similar to C++/Java?

ie:

if I have a class:

div.parent { padding: 0px; margin: 0px }

and I want to derive a subclass which inherits the parent class's
properties
but can also override some:

div.child extends div.parent { padding: 10px; /* padding property
overriden,
and margin property inherited */ }

I know this is not a CSS syntax, but is there a way to implement
something like this in CSS?

Thank You.

Harlan Messinger

2005-09-22, 7:48 pm

Els

2005-09-22, 7:48 pm

Lee wrote:

> I'm a newbie to CSS and I'm wondering if there is a way to implement
> inheritance in a way similar to C++/Java?
>
> ie:
>
> if I have a class:
>
> div.parent { padding: 0px; margin: 0px }
>
> and I want to derive a subclass which inherits the parent class's
> properties
> but can also override some:
>
> div.child extends div.parent { padding: 10px; /* padding property
> overriden,
> and margin property inherited */ }
>
> I know this is not a CSS syntax, but is there a way to implement
> something like this in CSS?
>
> Thank You.

Not entirely sure what you want to accomplish, but how about this:

<div class="parent">
<div class="child">
some text
</div>
</div>

div.parent,
div.child{
padding:0;
margin:0;
}
div.child{
padding:10px;
}

If you have a lot of children divs, and only one needs to be
different:

<div class="parent">
<div class="child">
some text
</div>
<div>
some more text
</div>
<div>
some more text
</div>
</div>

div.parent div{
padding:0;
margin:0;
}
div.child{
padding:10px;
}

Another way is setting two classes for one element, like so:
<div class="parent">
<div class="parent child">
some text
</div>
</div>

div.parent{
padding:0;
margin:o;
}
div.child{
padding:0;
}

HTH

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Fluitsma & Van Tijn - 15 miljoen mensen

Els

2005-09-22, 7:48 pm

Harlan Messinger wrote:

> Lee wrote:
>
> Option 1:
>
> div.parent, div.child { padding: 0px; margin: 0px }
> div.child { padding: 10px }
>
> Option 2:
> div.parent { padding: 0px; margin: 0px }
> div.child { padding: 10px }
> ...
> <div class="parent child">...</div>

I didn't read your reply before I wrote mine - honest :-)

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Gary Moore - Parisienne Walkways (Live)

Andy Dingley

2005-09-22, 11:24 pm

On 22 Sep 2005 14:00:42 -0700, "Lee" <craftystud-idol@yahoo.com> wrote:

>I'm a newbie to CSS and I'm wondering if there is a way to implement
>inheritance in a way similar to C++/Java?

No there isn't. Stop even _trying_ to do this! If you're used to OO
coding then you're going to find CSS hard work, not because it's
complicated but because it's so different to what you're used to. Sorry.

It's hard to do worthwhile inheritance in CSS because the selectors are
so "promiscuous". It's easy to cause a selector to apply, hard to avoid
one applying - so you have to think _much_ more carefully about the
"cascade" and the relative priorities.

Be warned also that IE has a poor CSS implementation, particularly for
selectors. Anything beyond the trivial is unreliable in practice.

Lee

2005-09-23, 7:40 pm

Thanks for all your replies Harlan, Els, and Andy.

I never knew that you could put more than one class name in a class
declaration:

<div class="parent child">...</div>

I haven't seen this syntax in any of the tutorials I've found on
google, but it works! Thank you!