Элементы списка стилей, которые не только содержат другие списки

Question

Я создал генератор оглавления на основе тегов <h1>...<h6> в HTML-документе. Я пытаюсь добавить пользовательские значки маркеров перед конечными наборами списков в списках. Мне удалось заставить это работать для простых <h1>...<h2>...<h3> прогрессий с помощью li:before CSS-селектора, но это не работает для прогрессий, которые пропускают уровни, например, <h1>...<h3>

Без свойства li:before промежуточный список не создает новую строку:

Вот что я хотел бы:

Есть ли способ сделать это, возможно, с помощью какого-либо способа выбрать только <li> элементов, чей первый дочерний элемент <a>? Мой опыт работы с современными хитростями CSS ограничен.

Вот минимальный пример:

.contents ul {
    list-style-type: none;
    padding: 0;
    margin-left: 15px;
}

.contents ul li:before {
    font-family: 'FontAwesome';
    content: '\f105';
}

<div class="contents">
  <ul> <!-- h1 level -->
    <li>
      <a href="#top-level">Top level</a>
      <ul> <!-- h2 level -->
        <li>
          <ul> <!-- h3 level -->
            <li>
              <a href="#third-level">Third level</a>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

Для справки, я использую значок FontAwesome angle-right (что интересно, фрагмент кода загружает этот шрифт).

Answer 1

Расширение ответа @ FridayAmeh для определения только first li с помощью якоря и применения к нему стиля.

Вам потребуется

.contents ul li:first-child > a:before 

Например ...

.contents ul {
  list-style-type: none;
  padding: 0;
  margin-left: 15px;
}

.contents ul li:first-child>a:before {
  font-family: "FontAwesome";
  content: "\f105";
  position: relative;
  margin-left: -.4em;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<div class="contents">
  <ul>
    <!-- h1 level -->
    <li>
      <a href="#top-level">Top level</a>
      <ul>
        <!-- h2 level -->
        <li>
          <ul>
            <!-- h3 level -->
            <li>
              <a href="#third-level">Third level</a>
            </li>
            <li>
              <a href="#third-level">Third level</a>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

Answer 2

Изменить .contents ul li:before на .contents ul li:first-child a:before, как это

    
    .contents ul {
        list-style-type: none;
        padding: 0;
        margin-left: 15px;
    }
    
    .contents ul li:first-child a:before  {
        font-family: 'FontAwesome';
        content: '\f105';
    }
    
    

    
    <div class="contents">
      <ul> <!-- h1 level -->
        <li>
          <a href="#top-level">Top level</a>
          <ul> <!-- h2 level -->
            <li>
              <ul> <!-- h3 level -->
                <li>
                  <a href="#third-level">Third level</a>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>