This requires my code for applying Twine tags to passage divs (unless you're using Twine 1.3.6 - see below), and extends on it as a mechanism for CSS selection. What these macros do, in order, is add a tag to the current passage's tag attribute, remove a tag, and toggle its presence (remove it if it's there, add it if it isn't). This means that conditional application of CSS, controlled by << if >> statements, is possible.

version.extensions["toggletag"]={major:1,minor:0,revision:0};macros["toggletag"]={handler:function(a,b,c){var p=e(a);if(p){var t=p.getAttribute("tags");var i=t.indexOf(c[0]);if(b!="addtag"&&i>=0){p.setAttribute("tags",t.replace(c[0],""));}else{if(b!="removetag"&&i<0){p.setAttribute("tags",t+" "+c[0]);}}}else{var t=state.history[0].passage.tags;var i=t.indexOf(c[0]);if(b!="addtag"&&i>=0){t.splice(i,1);}else{if(b!="removetag"&&i<0){t.push(c[0]);}}}function e(f){while(f.parentNode&&f.className!="passage"){f=f.parentNode;}if(f.getAttribute("tags")){return f;}return null;}}};macros["addtag"]=macros["toggletag"];macros["removetag"]=macros["toggletag"];

Usage examples: <<addtag "dream">> <<toggletag "lightworld">> <<toggletag "darkworld">>

These are guaranteed to work both inside passages, inside << replace >> macros, and, tantalisingly enough, inside << display >> macros. Interesting, very interesting.

Edit: If you're using the latest Twine 1.3.6 Alpha (28-1-13), which uses the [data-tags~= ] CSS syntax rather than my [tags~= ] syntax, use this code instead:

version.extensions["toggletag"]={major:1,minor:0,revision:0};macros["toggletag"]={handler:function(a,b,c){var p=e(a);if(p){var t=p.getAttribute("data-tags");var i=t.indexOf(c[0]);if(b!="addtag"&&i>=0){p.setAttribute("data-tags",t.replace(c[0],""));}else{if(b!="removetag"&&i<0){p.setAttribute("data-tags",t+" "+c[0]);}}}function e(f){while(f.parentNode&&f.className!="passage"){f=f.parentNode;}if(f.getAttribute("data-tags")){return f;}return null;}}};macros["addtag"]=macros["toggletag"];macros["removetag"]=macros["toggletag"];