Переопределить всплывающую подсказку с помощью CSS

Я пытаюсь изменить наклон моих интервалов. По какой-то причине мне нужно использовать один и тот же идентификатор для всех тегов <li> которые содержат мои интервалы, так что в основном происходит то, что все промежутки, которые я создал, имеют один и тот же идентификатор родителя:

<li id="li_id">
    <span><a href="/some/link.html">Link title</a></span>
</li>
<li id="li_id">
    <span class="anotherlink"><a href="/another/link.html">Another Link title</a></span>
</li>

Я проверил, как переопределить идентификатор, используя классы, аналогичные этому: могу ли я переопределить поведение #id ul li с определением класса, но я не могу заставить их работать.

CSS:

#primary_nav #home li#li_id>span:hover {
    background-image: url(this_image.png);
}

//This is for my first link
#primary_nav #home li#li_id .anotherlink >span:hover {
    background-image:url(another_image.png);
}

//This is for the other link.

Правильно ли мой синтаксис? Он, похоже, сейчас работает, и я не знаю, действительно ли CSS для другой ссылки правильный.

ПРИМЕЧАНИЕ. Я знаю, что это кажется немного странным, потому что процесс должен быть наоборот (1 класс, разные идентификаторы), но то, что я в основном делаю, это для существующего сайта, и я готов сделать некоторые неортодоксальные исправления, например это, потому что мы собираемся заменить весь сайт на новый, поэтому мне просто нужно убедиться, что этот сайт обновляется до тех пор, пока не появится сайт замены.