Assigning Links CSS classes

Sonictail

Hi,

My google-fu has failed me so I'm turning here for help.  I'm trying to assign links certain css classes.  For example, I have four links per passage and I'm trying to label them .1 .2 .3 .4 respectively so that I can create global CSS rules that will apply to every passage regardless of link.  I think I can do it in span but I was hoping to apply this directly to the link.

This tutorial at http://videlais.com/2014/03/13/twinetuesday-changing-the-css-rules-of-a-single-passage-link/ was interesting, but the way my project is setup it won't suffice due to it's complexity.

I'm looking into using JS to assign each link a different color in turn, but I'm hoping I've just missed how to assign a .class to a link.  Any suggestions or am I barking up the wrong tree?

Thanks for your time!
ST~

greyelf

The reason the tutorial you linked to does not work is that the Twine 1.4.2 story formats no longer assign an 'id' attribute to links so you cant use it in CSS.

You don't say which Twine story format you are using so I am assuming it is Sugarcane.

If you are trying to apply CSS to your links based on their order in a list you can do that via the nth-of-type pseudo selector.
eg. color 1st link red; second link blue, etc...

Passages:
note: I use a span tag to wrap the links being modified because you may want to include other unmodified links in your passages


:: Start
The quick brown fox jumped over the lazy dog.
<span class="the-links">
[[First Link|Next Passage]]
[[Second Link|Next Passage]]
[[Third Link|Next Passage]]
</span>

:: Next Passage
You don't want to be here.
<<back>>


Add to a Stylesheet passage:

#passages .the-links a.internalLink:nth-of-type(1) {
background-color: green;
color: red;
}
#passages .the-links a.internalLink:nth-of-type(2) {
background-color: red;
color: green;
}
#passages .the-links a.internalLink:nth-of-type(3) {
background-color: blue;
color: orange;
}


If you want to actually add classes to a link then you will need to use java-script to find it based on its position in the passage hierarchy, you may want to include the jQuery library to help you do this. I would need to know what your passage layout actually looks like to help with the java-script.

Sonictail

That explains what I was seeing in inspector.  I can't believe I didn't think of the nth property, so simple! 

And for the record I'm just using the basic twine, so yep, Sugarcane. 

Thanks for your assistance!