Оформляем пункты подменю [13/28] вопрос по контекстным селекторам

Курсы §13. Мастерская: создаём меню
1

Помогите пожалуйста разобраться, здесь в задании первым пунктом надо Задайть ссылкам подменю черный black цвет, вертикальные внутренние отступы 3px и горизонтальные внутренние отступы 0px.

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8">
        <title>Оформляем пункты подменю</title>
    </head>
    <body>
        <ul class="main-menu">
            <li><a href="#company">О компании</a></li>
            <li class="active">
                <a href="#services">Услуги</a>
                <ul>
                    <li><a href="#s1">Разработка</a></li>
                    <li><a href="#s2">Продвижение</a></li>
                    <li><a href="#s3">Контекст</a>
                </ul>
            </li>
            <li><a href="#team">Сотрудники</a></li>
            <li><a href="#contacts">Контакты</a></li>
        </ul>
    </body>
</html>

и там рекомендуют использовать контекстный селектор типа
.main-menu li li a { } У меня возник вопрос, а почему не срабатывает если селектор будет типа .main-menu ul li ul li a { } Я ж вроде как прописываю всё древо

2

По вашему селектору дерево выглядит другим образом. Ваш селектор .main-menu ul li ul li a означает, что внутри элемента с классом .main-menu находится ul. Внутри ul находится li, дальше внутри li находится еще один ul, li, a…
Но это не совсем так. Потому что первый ul имеет класс .main-menu.
Поэтому правильно будет так: .main-menu ul li a.

3 лайка
3

Мне кажется кще можно написать так .main-menu>.active ul li a, ну или без >