CSS: color style solution with css contexual selectors
Your web site always contains several modules which navigated by a menu or sth, just like this: forums | Blog | Photos. You may want each module has its own color style, so the users can recognize each module easily and your site also be cool. This article supplies a easier way to accomplish this aim by using the contexual selector feature of css.
1. What are contextual selectors of css?
Contextual selectors can look for element types, CLASS attributes, ID attributes or combinations of these:
DIV P { font: small sans-serif }
.reddish H1 { color: red }
#x78y CODE { background: blue }
DIV.sidenote H1 { font-size: large }
Reference to W3C
Of course, .class1 .class2 { .... } is also a contexual selector, so is this .class1 .class2 .class3 {...}. We mainly use this style in this article.
2. Samples.
Suppose you got two pages: page1.htm and page2.htm. How can we define two color styles for the two page with minimus code typing?
Below is page1 and page2's html. (to be simple, I just list a few elements)
page1:
<body class=page1>
<div class=primaryPalette> this is page1.</div>
</body>
page2:
<body class=page1>
<div class=primaryPalette> this is page2.</div>
</body>
Define css classes in the css file and link it to your pages.
.page1 .primaryPalette{
BORDER-LEFT-COLOR: #747e96; BORDER-BOTTOM-COLOR: #747e96; BORDER-TOP-COLOR: #747e96; BACKGROUND-COLOR: #747e96; BORDER-RIGHT-COLOR: #747e96
}
.page2 .primaryPalette{
BORDER-LEFT-COLOR: #44a12c; BORDER-BOTTOM-COLOR: #44a12c; BORDER-TOP-COLOR: #44a12c; BACKGROUND-COLOR: #44a12c; BORDER-RIGHT-COLOR: #44a12c
}
By doing this, you got two pages with different colors. This is just a simple sample. Actually you can define as complex styles as you can, just in this format: <[.page1|. page2[|...] ] [other classes inner]>. For example:
.page1 .a1 .b1 {}
.page2 .a1 .b1 {}
In the html of your pages, you just add or change the body's css class, then you can get a new color style of your page.
The idea of this article came from www.salesforce.com. You can check the source html and css of this web site and get the details.
