Stylesheets - Newbie: class inside class leads to undesired results

Author

Newbie: class inside class leads to undesired results

WillemB

2004-06-22, 7:23 pm

Hi,

I've run into a little problem, I'm hoping someone can help me out. I'm
learning a bit of CSS through modifying my TikiWiki website
(www.tikiwiki.org) and this is the problem: whenever I'm adding a new
paragraph heading in my text through the editor (which is part of TikiWiki),
the 'titlebar' class is used to format this section. When I enclose a
hyperlink inside this paragraph heading, it overwrites part of the titlebar
class with the 'wiki' class. This leads to an undesirable effect: text in a
paragraph heading is white, but gets overwritten to black. I cannot change
the 'wiki' class, because normal text (thus outside a paragraph heading)
requires hyperlinks to be in black. The ideal solution would be something
along the lines of "when hyperlink is part of paragraph heading, do not use
the wiki class / use color: white". Is it possible to create such an IF
clause or is there another work-around? I'm afraid CSS is still a bit too
complex for me to comprehend and I don't think complex rewriting of TikiWiki
is part of my abilities either...

Regards,
WillemB

-----------------------------------
div.titlebar {
background-color: #9cba00;
color: white;
border: 1px solid #84aa00;
padding-left: 2px;
padding-right: 1px;
padding-top: 1px;
padding-bottom: 1px;
clear: both;
font-weight: bold;
}

..wiki {
color: black;
}

Els

2004-06-22, 7:23 pm

WillemB wrote:

> The ideal solution would be something along the
> lines of "when hyperlink is part of paragraph heading, do
> not use the wiki class / use color: white". Is it possible
> to create such an IF clause or is there another
> work-around?

> -----------------------------------
> div.titlebar {
> background-color: #9cba00;
> color: white;
> border: 1px solid #84aa00;
> padding-left: 2px;
> padding-right: 1px;
> padding-top: 1px;
> padding-bottom: 1px;
> clear: both;
> font-weight: bold;
> }
>
> .wiki {
> color: black;
> }

Adding
div.titlebar .wiki {color:white;}
should do what you want.

div.titlebar .wiki means: any element with class="wiki" which
is inside a div element with class="titlebar".

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

WillemB

2004-06-23, 7:15 am

"Els" <els.aNOSPAM@tiscali.nl> wrote in message
news:Xns9510F21078519Els@130.133.1.4...
> Adding
> div.titlebar .wiki {color:white;}
> should do what you want.
>
> div.titlebar .wiki means: any element with class="wiki" which
> is inside a div element with class="titlebar".

Thank you so much Els, that was exactly what I needed. I will keep this in
mind, I'm sure it will come in handy again!

Regards,
WillemB