Page 1 of 1

CSS2 inherit other selector's block into block

Posted: Tue Oct 25, 2005 10:09 am
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.

Posted: Wed Oct 26, 2005 2:11 pm
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;}

Posted: Wed Oct 26, 2005 3:06 pm
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?

Posted: Wed Oct 26, 2005 3:11 pm
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.

Posted: Wed Oct 26, 2005 3:20 pm
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).

Posted: Wed Oct 26, 2005 3:42 pm
by Heavy
mmm.