Toggling a CSS property

Hi folks,

Longtime reader, first-time poster. I wonder if there's a
way to address the problem I describe below using CSS2; I've
not found any way to do it, and I've been looking for a

I try to be a good semanticist when I tag my HTML documents,
so I do things like

<span class="booktitle">Herzog</span>


<span class="filmtitle">Rear Window</span>.

Sometimes I have one inside the other, e.g.,

<span class="booktitle">An analysis of Hitchcock's <span
class="filmtitle">Rear Window</span></span>

Then in the CSS, I want to do something like

.booktitle, > .filmtitle {
	font-style: italic;

.booktitle > .filmtitle, .filmtitle > .booktitle {
	font-style: normal;

But there's a combinatorial explosion here, because I also
have HTML classes like "courtcase" and "newspaper" defined,
all of which also require italics and also require the
italics to be turned off if one class is inside the other. 

I'd like to be able to say in general, somehow, that if a
element is formatted to use italics, and it's inside another
element that's formatted to use italics, then the inner
object should use a roman font. And this should work at
arbitrary depth -- a book title within a movie title within
a book title (rare as that would be) should be italicized.

This seems similar to the 'toggle' idea mentioned on

but it's different in that the toggle idea would still
require a combinatorial explosion: you'd still have to

.booktitle .movietitle, .movietitle .booktitle {
	font-style: toggle;

and so on for every possible pairing of elements. That is,
unless I misunderstand how the toggle would be implemented.

Can anyone suggest a way to handle what I want elegantly in
CSS2 or -3?

Thanks very much,

Stephen R. Laniel
+(617) 308-5571
PGP key:

Received on Tuesday, 21 June 2005 18:10:27 UTC