Recipe 6.16. Apply Styles Dynamically to a Web Page

Problem

You want to change the style of elements within a web page when a user clicks on a link.

Solution

First, set up the markup with normal anchored links within the document. For this solution, the anchored links (technically referred to as fragment identifiers) are placed within an image map:

<img src="/books/3/27/1/html/2/target_header.jpg" alt="Header" border="0" usemap="#Map" /> <map name="Map" >  <area shape="circle" coords="115,136,72" href="#mark" />  <area shape="circle" coords="244,145,55" href="#jessica" />  <area shape="circle" coords="340,88,58" href="#trueman" />  <area shape="circle" coords="480,287,79" href="#katrina" /> </map> <div >  <dl >   <dt>Katrina</dt>   <dd>...</dd>  </dl>  <dl >   <dt>Jessica</dt>   <dd>...</dd>  </dl>  <dl >   <dt>Trueman</dt>   <dd>...</dd>  <dl >   <dt>Mark</dt>   <dd>...</dd> </div>

Then set up CSS rules for the default styles for the web page (see Figure 6-30):

.bios dt {  font-weight: bold; } .bios dd {  margin: 0;  padding: 0; }

Figure 6-30. The default rendering of the web page

Then use the target pseudo-class to define the look of the elements when the user clicks on the anchored link (see Figure 6-31):

.bios dl:target {  background-color: #999999;  border: 1px solid black;  padding: 1em;  font-weight: bold;  line-height: 1.5; } .bios dl:target dt {  font-style: italic;  color: white;  font-size: 1.5em;  background-color: #cccccc;  margin-right: 20px; } .bios dl:target dd {  margin-right: 20px;  background-color: #cccccc;  padding: 0 1em 1em 1em; }

Figure 6-31. The Katrina portion of the page changed style

To return the targeted element(s) back to their default style when the user clicks on another anchored link, use the negation pseudo-class (see Figure 6-32):

.bios dl:not(:target) {  border: none;  padding: 0;  font-size: .8em; }

Figure 6-32. The Katrina portion reverted back to its default value when another link was activated

Discussion

The : target and :not pseudo-classes are a part of the CSS 3 specification and thus aren't well-known to most web designers. However, the selectors can perform a great deal of heavy lifting.

Pure CSS collapsible menus

By working with these selectors, the JavaScript-based solution in Recipe 6.12 can be replaced with a few extra CSS rules. First, update the markup to add the anchor link:

<h5>  <a href="#menulink">Interesting Links</a> </h5> <ul >  <li><a href="http://www.ora.com/">O'Reilly</a></li>  <li><a href="http://www.slashdot.org/">Slashdot</a></li>           <li><a href="http://www.apple.com/">Apple</a></li>  <li><a href="http://www.microsoft.com/">Microsoft</a></li>  <li><a href="http://www.mozilla.org/">Mozilla</a></li>  </ul>

Then set up the following CSS rules:

/* default rendering */ ul#menulink {   display: none; } /* when 'targeted' */ ul:target {   display: block; } /* revert back to default rendering */ ul:not(:target) {  display: none; }

Currently collapsible menus and :target pseudo-classes are supported in Firefox, Mozilla, Safari, and Internet Explorer 7 for Windows.