How can I override the color of a link without changing the rest of the styling?

101 views
Skip to first unread message

Si

unread,
Jul 26, 2021, 1:09:46 PM7/26/21
to TiddlyWiki
I'm trying to create a template using the link widget that gives me green links. I tried the following which does not work:

<style>
.myClass {color:green;}
</style>

<$link class=myClass to="Hello"/>

I know about the overrideClass attribute, but using this means that I loose all the other styling that normally applies to links (for example italicising missing tiddlers).

Is there a way to get green links without changing the rest of the styling for links?

Note: I don't want to change the color for every link in my wiki, just for a specific template.

Brian Radspinner

unread,
Jul 26, 2021, 2:21:54 PM7/26/21
to TiddlyWiki
Try this:

<style>
a.myClass {color:green;}

</style>

<$link class=myClass to="Hello"/>

Si

unread,
Jul 26, 2021, 4:21:11 PM7/26/21
to TiddlyWiki
Perfect thank you!

Out of curiousity, why does this work? As far as I know a.myClass will select any link element that has the class myClass, but why doesn't .myClass work? Shouldn't it select any element with the class myClass, which would naturally include any link element with that class?

Brian Radspinner

unread,
Jul 26, 2021, 4:34:52 PM7/26/21
to TiddlyWiki
a.myClass should have a slightly higher CSS specificity than the default link styling, whereas .myClass by itself is not higher enough to override the TW defaults.

Si

unread,
Jul 26, 2021, 4:53:27 PM7/26/21
to TiddlyWiki
Thanks Brian!
Reply all
Reply to author
Forward
0 new messages