Почему не работает id у линка?

Question

[kursof1]

Мне нужно что бы при нажатии на ссылку href="#2" срабатывал focus на ссылке с id=2.(нужно что бы сделать якорь)
если убрать id то фокус работает, потому что он подключается через класс. В чем причина?

<span class="notsun" tabindex="0">Так работает если нажать сюда</span><br>
<a class="notsun" href="#2">Так не работает если нажать сюда url</a>
<br>

<p class="to-be-changed">Здесь просто текст</p>
<a class="to-be-changed" id="2"  href="#">А это ссылка с id 2 </a>

.notsun:focus~ .to-be-changed {
background: #000;
    color: red;
}

Comments

[Виталий Першин]

ИД не может начинаться с цифры

[kursof1]

Виталий, спасибо, запомню. Но это не решило задачу)

[Виталий Першин]

kursof1, Потому что таргет нужно использовать, если я правильно понял чего вы хотите

[Михаил]

id может начинаться с цифры, если это HTML5.

There are no other restrictions on what form an ID can take; in particular, IDs can consist of just digits, start with a digit, start with an underscore, consist of just punctuation, etc.

[Виталий Першин]

Михаил, Спасибо за информацию, тем не менее, это как точка с запятой в js, можно её упускать, но желательно этого не делать.

Answer 1

[kursof1]

В общем решение оказалось проще.

было

.notsun:focus~ .to-be-changed {
background: #000;
    color: red;
}

стало

.to-be-changed:focus {
background: #000;
    color: red;

}