0

I am trying to make a complete makeover of a very old website, to which hosting server I do not have access to. Not only its HTML is from the 1990's, but its code has many obvious mistakes, that when menage to workaround I usually end up messing up other parts of the site

Right now I need to adjust a table's content. That table is also messed up to some extent. So is there a way to tell with CSS to color all the links it is holding? I would like to apply to those links parameters

a:link
a:hover
a:active
a:visited
a:visited:hover

So far I was to only change that table's only non-linked text with

body > center:nth-child(1) > center:nth-child(5) > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(1) > td:nth-child(7) > b:nth-child(1) > font:nth-child(1)
{
color: #ffffff !important;
}

and change its two only links [aka the rest of its written & visible content] with

body > center:nth-child(1) > center:nth-child(5) > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(1) > td:nth-child(3) > b:nth-child(1) > a:nth-child(1) > font:nth-child(1),
body > center:nth-child(1) > center:nth-child(5) > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(1) > td:nth-child(5) > a:nth-child(1) > b:nth-child(1) > font:nth-child(1)
{
color: #ff0000 !important;
}

However when I try to extend these two lines of code with something like

> a:hover

or rework their end to

font:nth-child(1)a:hover

they get reverted to the default color that I am trying to get rid of. And as I am writing a CSS theme to be used with something like Stylish add-on in Firefox, I cannot touch the code and e.g. use the >>class<< method [as it was not used in the original HTML]. And so- is there a way to add >>hover<< [and other variants] to such links?

This table is on a minor sub-page - the priority was to make the main page aesthetics, which I did with various parameters for various elements, starting with >>body<< section - and so I Reckon some of those might be transferred to this sub-page. But for now this sub-page is the only one with a table [if that somehow helps with making a workaround]

[I am sorry if I have use the wrong nomenclature, but I am not a programmer - just a small time code tweaker]

And here is the original HTML code:

<table cellspacing="7" cellpadding="0" border="0" bgcolor="#000000">
<tbody><tr>
<td></td>
<td></td>
<td><b><a href="https://[-FIRST-LINK-]"><font color="#999999">-TEXT-OF-FIRST-LINK-</font></a></b>
</td>
<td></td>
<td>
<a href="mailto:[-SECOND-LINK-]">
<b><font color="#999999">-TEXT-OF-SECOND-LINK-</font></b></a></td>
<td></td>
<td><b><font color="#999999"-TEXT-OF-THE-ONLY-NONLINK-</font></b>
</td>
</tr>
</tbody></table>
Elerium-115
  • 9
  • 4

1 Answers1

0

The child selector only works for direct descendants. So once you have reached your anchor, you apply the hover, active, focus state.

body > center:nth-child(1) > center:nth-child(5) > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(1) > td:nth-child(3) > b:nth-child(1) > a:nth-child(1):hover > font:nth-child(1),
body > center:nth-child(1) > center:nth-child(5) > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(1) > td:nth-child(3) > b:nth-child(1) > a:nth-child(1):active > font:nth-child(1),
body > center:nth-child(1) > center:nth-child(5) > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(1) > td:nth-child(3) > b:nth-child(1) > a:nth-child(1):focus > font:nth-child(1),
body > center:nth-child(1) > center:nth-child(5) > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(1) > td:nth-child(5) > a:nth-child(1):hover > b:nth-child(1) > font:nth-child(1),
body > center:nth-child(1) > center:nth-child(5) > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(1) > td:nth-child(5) > a:nth-child(1):active > b:nth-child(1) > font:nth-child(1),
body > center:nth-child(1) > center:nth-child(5) > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(1) > td:nth-child(5) > a:nth-child(1):focus > b:nth-child(1) > font:nth-child(1) {
    color: #00ff00;
}

Not sure if these :nth-childs, b and font selectors are necessary.
Since I don't know your HTML code, I can't see were to tweak this selector.

:active for holding down on the link.
:focus when accessed by keyboard or clicking on the link.

Tim Vermaelen
  • 6,869
  • 1
  • 25
  • 39
  • This worked - almost. Because I doesn't affect color of the 1st link [i.e. when it is inactive]. I used variants with `:link`, `:hover` and `:active`, as others I'll not need - but also tried adding `:visited`. As for your question: the order of nested selectors differs in that HTML. I tried applying `:link` accordingly before `a` and `b`, but it did not work - i.e. empirical result showed that even the `font` is needed. So it's weird - because how can this work for the second [inactive] link but not for the first one? [I edited my post by adding to it that original HMTL code] – Elerium-115 Jun 27 '22 at 17:44
  • For now `body > center:nth-child(1) > center:nth-child(5) > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(1) > td:nth-child(3) > b:nth-child(1) > a:nth-child(1):link> font:nth-child(1):link { color: #ff0000; }` does not work - but I can use a workaround for it by changing the overall color of font with `body > center:nth-child(1) > center:nth-child(5) > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(1) > td:nth-child(3) > b:nth-child(1) > a:nth-child(1) > font:nth-child(1) { color: #ff0000; }`. But I would rather not relay on this because it might be less future proof – Elerium-115 Jun 27 '22 at 17:51
  • `:link` belongs to the state of an anchor tag, not font. – Tim Vermaelen Jun 27 '22 at 18:43
  • So... thus I am forced to use that workaround of mine? Or to adjust that not-working CSS from above comment to `body > center:nth-child(1) > center:nth-child(5) > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(1) > td:nth-child(3) > b:nth-child(1) > a:nth-child(1) > font:nth-child(1) { color: #ff0000; }` as it is the proper way? But if yes, then why do I not have the need to use also `body > center:nth-child(1) > center:nth-child(5) > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(1) > td:nth-child(5) > a:nth-child(1)> b:nth-child(1) > font:nth-child(1) { color: #ff0000; }`? – Elerium-115 Jun 27 '22 at 21:33