css toggles?

[rbfree]

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"

<!-- 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 -->

/* 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 */

[RyanReese]

Originally Posted by rbfree

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!!

Yes they are in the JS. I can point to where they refer to it if you relaly want me to.

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

Here you go.

That code is very hacky and is written poorly. In short you will never need to know what that code fully does.

[rbfree]

THanks Ryan. The author said the solution (to posed problem) didn't require js so I was a bit confused on that. Apparently auth was styling with js, then.

[RyanReese]

Originally Posted by rbfree

THanks Ryan. The author said the solution (to posed problem) didn't require js so I was a bit confused on that. Apparently auth was styling with js, then.

Oh wait I retract my statement...I missed it in the CSS too lol.

He makes the image big by default, but sets it to 100% of the anchors width/height, and on hover he sets the width/height back to auto

.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; }

[rbfree]

Thanks for articulating this tactic. Clever, from my perspective. Do you see any major drawbacks to this approach?

[RyanReese]

Umm....not that I see really. My philosophy is, try something until it breaks