Как обратиться к псевдоклассу элемента вложенного списка?

Question

[Николай]

Есть такой HTML-код.

<ul>
   <li> <a href="">Level 1</a> </li>
   <li> <a href="">Level 1</a> </li>
   <li> <a href="" class=" class icon">Level 1</a> 
       <ul>  
         <li> <a href="">Level 2</a> </li>
         <li> <a href="">Level 2</a> </li>
         <li> <a href="" class="class icon">Level 2</a> 
            <ul>  
                  <li> <a href="">Level 3</a> </li>
                  <li> <a href="">Level 3</a> </li>
                  <li> <a href="">Level 3</a> </li>
            </ul>  
         </li>
      </ul>
  </li>
</ul>

Класс "icon" добавляет иконку через подключенную библиотеку font-awesome:
Например:

.icon::before {
    content: "\f107";
}

Как переопределить стили класса "icon" только для определенного уровня списка, например, Level 2

Я перепробовал много вариантов, таких как

ul li ul li .icon::before {
    content: "..."!important;
}

и результат - либо стили применяются ко всем уровням списка, либо ни к одному.

Answer 1

[Danya Kozlovskiy]

Мало вариантов попробовали...

ul > li > ul > li .icon::before {
    content: "..."!important;
}

И возможно у вас лишнее слово class в атрибуте class.

Comments

[Николай]

Класс "class" отвечает за позиционирование иконки в списке: отступы и т.д. Ваш вариант тоже пробовал, он не работает. Почему - не могу разобраться.

[Danya Kozlovskiy]

Differman, возможно как-то не правильно написали или еще что-то. Но как видите работает: https://jsfiddle.net/cjpt7oz9/ .