@Differman

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

Есть такой 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;
}


и результат - либо стили применяются ко всем уровням списка, либо ни к одному.
  • Вопрос задан
  • 51 просмотр
Пригласить эксперта
Ответы на вопрос 2
morto
@morto
вечный ученик
Мало вариантов попробовали...
ul > li > ul > li .icon::before {
    content: "..."!important;
}

И возможно у вас лишнее слово class в атрибуте class.
Ответ написан
RomanTRS
@RomanTRS
Нужна точка отсчета.
Если использовать такую структуру, то все работает:
ul.list > li > ul > li > .icon::before {..}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы