Одновременно изменить цвет фона обеих ссылок сносок при нажатии?

Question

У меня есть ссылки на сноски, и я хочу изменить цвет фона обеих ссылок при нажатии.

<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>

Это то, что я пытался, но это, очевидно, только изменяет ссылку на список ол:

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

Как можно одновременно изменить цвет фона ссылок p и ol при нажатии любой из ссылок, если это возможно, используя только чистый CSS?

Answer 1

К сожалению, <a> элемент прозрачен и не может иметь цвет фона. То, что вы ищете, это нацелиться на <sup> элемент вместо К сожалению, нет возможности нацелиться на <sup> элемент, основанный на условии <a> тег с необработанным CSS, так как у CSS нет родительского селектора.

Таким образом, у вас есть только два варианта.

Вариант 1: реструктурируйте свой HTML, чтобы <a> тег включает в себя <sup> тег, а не наоборот:

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>

Вариант 2: использовать 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>

Надеюсь это поможет!:)