почему первый код работает, а второй не работает?

Question

когда я помещаю div.main как отдельное условие, код не работает

<div class="user-panel main"> 
    <input type="text" name="login"> 
</div>




 document.querySelector("div.user-panel.main input[name='login']").style.backgroundColor = "red"; // this code works
 document.querySelector("div.user-panel  div.main input[name='login']").style.backgroundColor = "red"; // this code doesn't work

Answer 1

Пробел в селекторе запросов означает, что один элемент находится внутри другого.Вторая строка ищет input[name='login'], содержащийся в div.main, который содержится в другом div (div.user-panel).

Answer 2

Когда ваши селекторы объединяются с пробелом - комбинатор потомков - это называется селектором потомков.Так что

document.querySelector("div.user-panel  div.main input[name='login']")

ищет input[name='login'] внутри div.main внутри div.user-panel.

Так как в вашем html это просто один div с 2 классами, этот селектор не делаетничего не найти.

Однако, если ваш html выглядит так:

<div class="user-panel">
    <div class="main">
        <input type="text" name="login"> 
    </div>
</div>

, это сработает.