How can I change the color of a button if it's been previously pressed? [Snowman 1.3]

Question

An example of this might be when the player is asking a series of questions that all lead back to a single passage. I need to alter the color of choice buttons that have been previously selected. The player can still access them, but this will make the process easier to follow. 

Here's my stylesheet.

/*choice button*/

#choices {
	list-style: none;
	padding: 0;
	border: 1px solid #bbb;
}
#choices li {
	margin: 0;
	padding: 0;
}
#choices li:not(:first-child) {
	border-top: 1px solid #bbb;
}
#choices li a {
	display: block;
	margin: 0;
	padding: 0.5em 0.8em;
	border: none;
	text-decoration: none;
	font-size: 75%;
}
#choices li a:hover {
	color: #fff;
	background-color: #718389;
}

/*name input button*/

#nameinput button {
  display: block;
	width: 100%;
	border: 1px solid #bbb;
	background-color: inherit;
	line-height: inherit;
  	padding: 0.5em 0.8em;
	text-align: left;
  	font-size: 75%;
  
}
#nameinput button:hover {
	color: #fff;
	background-color: #718389;
}

 

Answer 1

You're not going to be able to use the standard :visited CSS pseudo class normally used with link to style selected options due how the web-application works by default.
eg. Doesn't alter the location bar URL, nor does it track history using the web-browser's Navigation History.

I believe you're going to need to use (a) story variable(s) to track which options have been previously selected and then use that information when (dynamically) creating the option links.

Answer 2

As greyelf has already said, the standart :visited pseudo class doesn't work, but Twine is aware of that.

Therefore it adds every visited Button to the .visited class.

So just Swap every ":" in front of "visited" with a "." and it should work.

Comments

@Mr_Robot

...but Twine is aware of that. Therefore it adds every visited Button to the .visited class.

The Harlowe story format supports this functionality, unfortunately the Snowman story format that cwcorella is asking this question about does not.

note: The Twine application itself handles the editing of Passage content and the combining of those Passages with a story format to create a story HTML file. It is the story format that supplies all the core functionality and default layout of the generated story HTML file.

---

Oh, sorry for the mistake and thank you for the correction, then