Simultaneously change background-color of both footnote links on click?

Question

I have footnote links and I want to change the background color of both links when clicked.

<p id='text1'>Text1<sup><a href='#footnote1'>[1]</a></sup></p>

<ol>
  <li><sup id='footnote1'><a href='#text1'>[1]</a></sup>Footnote1</li>
</ol>

This is what I tried but it obviously only changes the ol list link:

ol li sup a:active {background-color:yellow}

How can I simultaneously change the background color of both the p and ol links when any of the links are clicked, if possible using only pure CSS?

Answer 1

Unfortunately, an <a> element is transparent, and as such, cannot have a background color. What you're looking for is to target the <sup> element instead. Unfortunately, there's no way to target the <sup> element based on the condition of the <a> tag with raw CSS, as CSS has no parent selector.

As such, you only have two options.

Option 1: Restructure your HTML so the <a> tag includes the <sup> tag, and not the other way around:

a sup {
  background: green;
}

a:visited sup {
  background: cyan;
}

<p id='text1'>
  Text1
  <a href='#footnote1'>
    <sup>[1]</sup>
  </a>
</p>

<ol>
  <li>
    <a href='#text1'>
      <sup id='footnote1'>[1]</sup>
    </a>Footnote1
  </li>
</ol>

Option 2: Use JavaScript:

var elements = document.getElementsByTagName('a');

for (var i = 0; i < elements.length; i++) {
  document.getElementsByTagName('a')[i].parentNode.style.backgroundColor = "cyan";
}

<p id='text1'>
  Text1
  <sup>
    <a href='#footnote1'>[1]</a>
  </sup>
</p>

<ol>
  <li>
    <sup id='footnote1'>
      <a href='#text1'>[1]</a>
    </sup>Footnote1
  </li>
</ol>

Hope this helps! :)