CSS inline link colors in tables - Twine 1.4.2/Sugarcube 2

Question

I'm wondering what the syntax is (if it exists) for altering the color of a link in the 'td' element of a table in Twine.

I can't use the method I normally use (via the stylesheet), because I'm using nested tables to build a menu system, and trying to wrap just the link with a hook breaks the table.  Here's a quick, not fully functioning example:

<span id="replace"><table>
	<tr>
		<td><<link "Apple">>
<<replace "#replace">>
	<table>
		<tr>
			<td><<link "Red Delicious">><</link>></td>
			<td><<link "Golden Delicious">><</link>></td>
			<td><<link "Granny Smith">><</link>></td>
			<td><<link "Back">><</link>></td>
		</tr>
	</table>
<</replace>>
<</link>></td>
		<td><<link "Orange">><</link>></td>
		<td><<link "Banana">><</link>></td>
	</tr>
</table></span>

If I try to make the "Apple" link red with my normal method (.red from my stylesheet), I either have to completely wrap it around the link element, preventing me from styling the nested links, or it breaks the table.

I assume a possible solution is styling the link color by the 'td' element, but I've spent quite a while searching online, and can't seem to figure out if that's possible, or the syntax if it is.

This isn't a huge deal for me, but I'm definitely curious if it can be done.

Answer 1

Ah ha! I think I've figured it out.  Instead of using:

stylesheet: .red a { color:red }

<span id="replace"><table>
	<tr>
		<td>@@.red;<<link "Apple">>
<<replace "#replace">>
	<table>
		<tr>
			<td><<link "Red Delicious">><</link>></td>
			<td><<link "Golden Delicious">><</link>></td>
			<td><<link "Granny Smith">><</link>></td>
			<td><<link "Back">><</link>></td>
		</tr>
	</table>
<</replace>>
<</link>>@@</td>
		<td><<link "Orange">><</link>></td>
		<td><<link "Banana">><</link>></td>
	</tr>
</table></span>

I just need to set the class of the td section to red.  e.g:

 

<span id="replace"><table>
	<tr>
		<td class="red"><<link "Apple">>
<<replace "#replace">>
	<table>
		<tr>
			<td><<link "Red Delicious">><</link>></td>
			<td><<link "Golden Delicious">><</link>></td>
			<td><<link "Granny Smith">><</link>></td>
			<td><<link "Back">><</link>></td>
		</tr>
	</table>
<</replace>>
<</link>></td>
		<td><<link "Orange">><</link>></td>
		<td><<link "Banana">><</link>></td>
	</tr>
</table></span>

So far it seems to be working, although if I'm setting myself up for problems, feel free to let me know.  I'm mostly putting this here in case someone else would search for a similar answer.

Comments

Well done, I was in the middle of writing up a suggestion to use the class attribute of the td element when you posted your own discovery of the same possible solution.

---

I may have figured it own on my own, but thank you anyway for being willing to take the time to explain it to me!  I'd been beating my head against this problem for two days before finally figuring it out (in my defense, I knew nothing about html or css two weeks ago),