Css Style Sheets

Need some help with CSS? Want to see what kinds of things you can do using CSS? You've come to the right place!

css toggles?

Written by ksmithaiea on

Does CSS have toggle selectors? I'm working through an article I've read (http://randsco.com/_miscPgs/cssZoomPZ3.html) and am trying to reconcile the CSS with the (x)html.

The author uses some classes ("Bdr," "Cap," and "Lnk") that I don't see in the CSS. In the same article the auth refers to them as toggles. "In the above example the following toggles are set in the <div> classnames: Bdr/noBdr; Cap/noCap; Lnk/noLnk." (Or, are these javascript functions?) Thanks as always!!

EDIT: in this same css, what does this notation mean/do? "html>/**/body"

HTML4Strict Code:

<!-- start PZ3 code -->
 
<div
class="PZ3zoom PZ3-r Bdr Cap Lnk"
style="width:210px; height:137px;"><a
href="http://randsco.com/blank.html"
onclick="return false"><img
src="http://randsco.com/_img/blog/0604/pz3-2.jpg"
alt="PZ3 demo #2"
title="" /><span
class="PZ31cap"
style="width:479px;"><span
class="PZ3inr"><strong>Afternoon Light: </strong>The same Pioneer Basin view, looking toward 3<sup>rd</sup>
& 4<sup>th</sup> Recess, later in the day.  <em><span style="color:#ccf; background:inherit;">Photo by Brian Ernst</span></em></span></span></a></div>
 
<!-- end PZ3 code -->

CSS Code:

/* Photo-Caption PZ3 CSS v080630
* copyright: [url]http://randsco.com/copyright[/url]
* [url]www.randsco.com[/url]
*/
 
.PZ3-l
{ float:left; margin-right:10px; }
.PZ3-r
{ float:right; margin-left:10px; direction:rtl; }
  html>/**/body .PZ3-r
{ position:relative; }
 
.PZ3zoom
{ border:1px
solid
#369; }
.PZ3zoom a,.PZ3zoom a:visited
{ display:block;
  padding:0; overflow:hidden; text-decoration:none;
  height:100%; width:100%; }
  html>/**/body .PZ3-r a { right:0; }
 
.PZ3zoom a:hover
{ position:absolute;
  z-index:999; padding:0; background:none;
  cursor:default; height:auto; width:auto;
  overflow:visible; border:1px
solid
#369;
  margin:-1px
0
0 -1px; }
  html>body .PZ3zoom a:hover
{ margin:-1px -1px
0 -1px; }
 
.PZ3zoom a img { border:0; height:100%; width:100%; }
.PZ3zoom a:hover img { height:auto; width:auto;
  border:0; }
 
a:hover
.PZ3cap,
a:hover
.PZ31cap
{ display:block;
  direction:ltr; font:10pt verdana,sans-serif;
  margin-top:-3px; background:#369; color:#fff;
  text-align:left; }
a:hover
.PZ3cap
{ padding:3px
5px; }
.PZ3inr
{ display:block; padding:2px
5px; }
 
.noCap a:hover
.PZ3cap,
.noCap a:hover
.PZ31cap
{ display:none; }
.noBdr,.noBdr a:hover
{ border:0; }
.Lnk a:hover
{ cursor:pointer; }
 
/* End Photo-Caption Zoom CSS */

Previous Article Next Article