CSS2 inherit other selector's block into block

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
Heavy
Forum Contributor
Posts: 478
Joined: Sun Sep 22, 2002 7:36 am
Location: Viksjöfors, Hälsingland, Sweden
Contact:

CSS2 inherit other selector's block into block

Post by Heavy »

Just for the CSS terminology:
SELECTOR{BLOCK}, where BLOCK is zero or more occurances of PROPERTY:VALUE;

Take this:

Code: Select all

.foo{color:red;}
.bar{font-weight:bold;}
I want to inherit properties from selector .foo into the block of selector .bar.

Is that possible?

I am not talking about the inherit value of a property, accessing the value from the parent element. Nope. I want to reuse a class and extend it, (think extending a PHP-class, but this is CSS).

I have browsed the Spec for a while but I couldn't find anything.
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Post by pickle »

There are two ways I can think of.
  1. wrap .bar in .foo:

    Code: Select all

    <div class = 'foo'>
       <div class = 'bar'>
          test
       </div>
    </div>
  2. Double up on the declaration:

    Code: Select all

    .foo, .bar{color:red;}
    .bar{font-weight:bold;}
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
Heavy
Forum Contributor
Posts: 478
Joined: Sun Sep 22, 2002 7:36 am
Location: Viksjöfors, Hälsingland, Sweden
Contact:

Post by Heavy »

pickle wrote:There are two ways I can think of.
  1. wrap .bar in .foo:

    Code: Select all

    <div class = 'foo'>
       <div class = 'bar'>
          test
       </div>
    </div>
Definitely a no go. That's not what I am talking about.
[*]Double up on the declaration:

Code: Select all

.foo, .bar{color:red;}
.bar{font-weight:bold;}
[/list]
that somewhat does the job but can get very cluttery.

BUT when .foo is defined in an external file I can only read (or don't want to edit), I would like .bar to just extend .foo, which can't be done like that since I don't edit the external file.

So there is a possibility to use both of the classes in an element like

Code: Select all

<input class="foo bar" />
But that is just as cluttery. There should be a way to cleanly inherit definitions of selector .A into selector .B which extends .A and then only use .B like:

Code: Select all

<input class="B" />
Don't you think?
User avatar
Heavy
Forum Contributor
Posts: 478
Joined: Sun Sep 22, 2002 7:36 am
Location: Viksjöfors, Hälsingland, Sweden
Contact:

Post by Heavy »

I am wondering because my class attributes in my elements are getting three and four classes listed and I think it is taking too much space.
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Post by pickle »

You might be able to redeclare the class. If you declare .foo in an external file, you should be able to declare it inline as well with some additional properties. So, in the external file, you can declare the colour:red. Then in the head of the document, you can declare the font-weight, and it should work.

I've seen lists of multiple classes in quite a few places, so it looks like thats probably the best bet (even thought it takes a bit of space).
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
Heavy
Forum Contributor
Posts: 478
Joined: Sun Sep 22, 2002 7:36 am
Location: Viksjöfors, Hälsingland, Sweden
Contact:

Post by Heavy »

mmm.
Post Reply