I'm trying to localize the setting of colors on a series of webpages
by defining color palettes that will be used for various page areas.
I've defined some palette classes like .clrLt, .clrMd, .clrDk and
associated link colors using selectors. One of the aims is to ensure
that matching text color, background, and link colors are maintained.
These palettes are applied as multiple classes to various page modules
which also have abstract classes that define other characteristic.
Modules may contain other modules.
The problem that I run into is that my link colors are not changing
based on their immediate container's class. If a link is inside a
..clrLt container, which is itself inside a .clrMd container, the link
colors are defined by the .clrMd selector. It appears that the
browsers don't consider an immediate dependacy to be a significant as
which class was defined last. If I could use a child selector ">" I
might be able to override this, at least for links directly in the
parent container. The same thing happens with other nesting and color
combinations. If I reorder the class definition, I get different
results, but they always favor the last define class.
I thought about defining special case nesting selectors like ".clrDk
..clrLT a:link" but there is no systematic way to predict that and the
combinations get out of hand very quickly.
Any ideas?
= simplified css example =
..clrLt{
background-color: #FFFFFF;
color: black;
}
..clrLt a:link,.clrLt a:visited, .clrLt a:active, .clrLt a:hover{
color: red;
}
..clrMd{
background-color: #666666;
color: #CCFFFF;
}
..clrMd a:link, .clrMd a:visited, .clrMd a:active, .clrMd a:hover{
color: yellow;
}
..clrDk{
background-color: #000000;
color: #FFFFFF;
}
..clrDk a:link, .clrDk a:visited, .clrDk a:active, .clrDk a:hover{
color: Aqua;
}
= simplified html example =
<body class="clrLt">b ody content with light background
<div class="nav clrDk">
<a href="#">link</a>
<a href="#">link</a>
<a href="#">link</a>
</div>
<div class="content clrMd">
some content with medium background "><a href="#">link</a>
<div class="inset clrLt">some inset content with light background <a
href="#">link</a>
</div>
</div>
</body>
