Как написать css селектор для этого html тега?

</li class='nav-item'>
    {% if user.is_authenticated %}
    <li>User: {{ user.get_username }}</li>
    <li><a href="{% url 'logout'%}?next={{request.path}}">Logout</a></li>
    {% else %}
    <li><a href="{% url 'login'%}?next={{request.path}}">Login</a></li>
    {% endif %}

Дело в том, что у меня еще сверху есть теги <li> с таким же классом 'nav-item', кстати попутный вопрос: в классах можно любое имя задавать? Сейчас мне нужно изменить цвет строк с переменными {{ user.get_username }} и текста тега <a> на белый цвет. Я написал такой селектор просто для теста, но почему-то не работает:

.collapse.navbar-collapse .nav-item li{
background: red;
}

Два родительских тега, находящихся выше указанного html класса:

<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
  <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
  </ul>