Contextual Selectors

[noah.guyot@vignette.com]

all
--

Here is a write up on the contextual selectors idea per our conference call this morning.


One way to prevent stylesheet clashes bewteen different stylesheets is to use contextual selectors (also known as descendants).

Here's how they work:
----

Suppose we need to make text inside all <h1> tags to be red.
The class would look like this: 

h1 {color:#ff0000;}

and the html would look like this:

<h1>Red Text</h1>

The resulting text inside the <h1> tag would look red in a browser.

Now suppose we want most of the <h1> tags to be red but the navigation area should be green.
The style sheet would look like this:

h1 {color:#ff0000;}

.navigation h1 {color:#00ff00;}

and the html would look like this:


<h1>Red Text</h1>

<div class="navigation">
<h1>Green Text>
<h1>More Green Text</h1>
</div>

That's contextual selectors in a nutshell.


Application to Portlets
----

The way we could use this for portlets is a follows. We could wrap the entire portlet markup in a <div class="portlet"> </div> and make all of the portlets classes contextual. That could help prevent stylesheet clashes.

Example:
----
stylesheet:

.portlet h1 {color:#0000ff;}

HTML:

<h1>normal text</h1>

<div class="portlet">
<h1>Blue text in portlet</h1>
</div> 


--
noah