Revision of Twine: apply CSS to passages with specific tags from Mon, 02/04/2013 - 23:05

You can write CSS that applies only to passage <div>s (such as those selected with .passage) that have been given specific tags in Twine!

If you're using this 1.3.6 alpha you can do this by just using the selector syntax [data-tags~=tagname].
So, if you tag a bunch of passages with "dream", you can then apply specific CSS to just those passages like this:

[data-tags~=dream] {
color: aqua;
text-shadow: aqua 0 0 3px;
}

Some other selector syntax exists that you might find useful:
[data-tags] for a passage with at least one tag of any sort. [data-tags=dream] for a passage which only has one tag, "dream". [data-tags*=swamp] for a passage whose tags contain "swamp" (such as "grayswamp" or "swampfort"). And there's :not([data-tags~=gold]) for a passage which does not have the tag "gold".

And, of course, you can select elements of a matching passage <div> by combining selectors with ".body", ".body .internalLink" and such:
[data-tags~=cave] .body .internalLink {
color: gold;
}

If you're using a standard version of Twine the selector syntax described above is the same, but you'll need to include this Javascript code as well, inside a disconnected passage that has "script" as its only tag:
Passage.prototype.render2 = Passage.prototype.render; Passage.prototype.render = function () { var b = this.render2(); b.setAttribute("data-tags",this.tags.join(" ")); return b; }; var tgs = state.history[0].passage.tags.join(" "); var fc = $('passages').firstChild; fc.setAttribute("data-tags",tgs); If you're using Sugarcane, also add this code after it: var it = setInterval(function(){ var fd = $('passages').firstChild; if (fd!=fc) { clearInterval(it); fd.setAttribute("data-tags",tgs); } },0);
Of course, this won't work for passage text displayed with the << display >> macro.
If you like this code, consider using these macros that let you control tags inside the game.