Кекстаграм: Эпилог. JavaScript / Кекстаграм: играем с классами [6/27]

Добрый день. Подскажите пожалуйста почему в html при написании в js-коде document.querySelector(‘li.walden’) выбирается нужный элемент, а при записи
document.querySelector(‘li .walden’) нет, хотя они по идее идентичны.
HTML:

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8">
        <title>Кекстаграм: играем с классами</title>
        <base href="/assets/course98/">
        <link href="style.css" rel="stylesheet">
        <link href="course.css" rel="stylesheet">
    </head>
    <body class="keksta">
        <div class="photos">
            <div class="photo"></div>
        </div>
        <ul class="toggle-controls">
            <li class="walden">walden</li>
            <li class="toaster">toaster</li>
        </ul>
        <script src="script.js"></script>
    </body>
</html>

JS:

var toasterControl = document.querySelector('li.toaster');
if (toasterControl) {
    toasterControl.classList.remove('active');
}

var waldenControl = document.querySelector('li.walden');
if (waldenControl) {
    waldenControl.classList.add('active');
}

var photo = document.querySelector('.photo');
if (photo) {
    photo.classList.remove('toaster');
    photo.classList.add('walden');
}

Здесь есть пробел, правильно? Пробел показывает вложенность одного элемента в другой. А без пробела - это просто li с классом.

1 лайк

Ага, спасибо большое понял)