By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,648 Members | 1,203 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,648 IT Pros & Developers. It's quick & easy.

Inherit classes?

P: n/a
Is there a way in CSS to say that I want to have a class apptoolbar
which is just like the toolbar class, only with a different bg color?

My q&d approach was to copy the toolbar class definition and change
the bg color, but this is not esthetically pleasing ;-)

Kai
Jul 20 '05 #1
Share this Question
Share on Google+
6 Replies


P: n/a
Kai Grossjohann <ka*@emptydomain.de> wrote:
Is there a way in CSS to say that I want to have a class apptoolbar
which is just like the toolbar class, only with a different bg color?

My q&d approach was to copy the toolbar class definition and change
the bg color, but this is not esthetically pleasing ;-)


..toolbar, .apptoolbar {
all styles except background-color
}

..toolbar {
background-color
}

..apptoolbar {
background-color
}

I normally find that after I've finished a site it pays to spend some
time going through the stylesheet combining and editing to reduce the
amount of duplication

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>
Jul 20 '05 #2

P: n/a
Kai Grossjohann wrote:
Is there a way in CSS to say that I want to have a class apptoolbar
which is just like the toolbar class, only with a different bg color?

My q&d approach was to copy the toolbar class definition and change
the bg color, but this is not esthetically pleasing ;-)


I'd do something like:

..toolbar { everything: except; background: color; }
..app.toolbar { background-color: red; }
..other.toolbar { background-color: blue; }

Then:

class="toolbar app" and class="toolbar other"

--
David Dorward http://dorward.me.uk/
Jul 20 '05 #3

P: n/a
Steve Pugh <st***@pugh.net> wrote in message news:<o2********************************@4ax.com>. ..

.toolbar, .apptoolbar {
all styles except background-color
}

.toolbar {
background-color
}

.apptoolbar {
background-color
}


Cool! It's not inheritance, but for some reason I can't explain I
like your suggestion better than David's.

But thanks to David, as well, for his suggestion. It's always good to
have more than one alternative.

Or is there a reason I can't see to prefer one solution over the
other?

Kai
Jul 20 '05 #4

P: n/a
Kai Grossjohann wrote:
Steve Pugh <st***@pugh.net> wrote in message news:<o2********************************@4ax.com>. ..
.toolbar, .apptoolbar {
all styles except background-color
}

.toolbar {
background-color
}

.apptoolbar {
background-color
}

Cool! It's not inheritance, but for some reason I can't explain I
like your suggestion better than David's.

But thanks to David, as well, for his suggestion. It's always good to
have more than one alternative.

Or is there a reason I can't see to prefer one solution over the
other?


There's only one problem with David's solution: Mozilla and Opera handle
it fine, but Internet Explorer up to version 6 is broken, it doesn't
apply the multiple classes correctly.

..app.toolbar { background-color: red; }
..other.toolbar { background-color: blue; }

<p class="app toolbar">Testing 1 2 3</p>
<p class="other toolbar">Testing 1 2 3</p>

Both paragraphs have a blue background in IE6 (changing the sequence of
the classes in the class attribute doesn't help, either)

Other than that, I prefer David's solution, it's a bit cleaner.
Matthias

Jul 20 '05 #5

P: n/a
Matthias Gutfeldt <sa************@gmx.net> wrote:
There's only one problem with David's solution: Mozilla and Opera handle
it fine, but Internet Explorer up to version 6 is broken, it doesn't
apply the multiple classes correctly.

.app.toolbar { background-color: red; }
.other.toolbar { background-color: blue; }

<p class="app toolbar">Testing 1 2 3</p>
<p class="other toolbar">Testing 1 2 3</p>

Both paragraphs have a blue background in IE6


Just to clarify - this is a bug with the handling of the .foo.bar
selector not with the handling of the class="foo bar".

Change the CSS to simply
..app { background-color: red; }
..other { background-color: blue; }
and everything works just fine. This is of course a half way house
between my solution and David's.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>
Jul 20 '05 #6

P: n/a
Steve Pugh wrote:
Matthias Gutfeldt <sa************@gmx.net> wrote:

There's only one problem with David's solution: Mozilla and Opera handle
it fine, but Internet Explorer up to version 6 is broken, it doesn't
apply the multiple classes correctly.

.app.toolbar { background-color: red; }
.other.toolbar { background-color: blue; }

<p class="app toolbar">Testing 1 2 3</p>
<p class="other toolbar">Testing 1 2 3</p>

Both paragraphs have a blue background in IE6

Just to clarify - this is a bug with the handling of the .foo.bar
selector not with the handling of the class="foo bar".


Thanks - my test case wasn't good enough to catch this!
Matthias

Jul 20 '05 #7

This discussion thread is closed

Replies have been disabled for this discussion.