Мастер класс создание интерактивных компонентов интерфейса (галерея)

Общее
1

Привет. Вопросов по прохождению нет. Но есть вопрос касательно одного момента, который увидел в 1ый раз при прохождении этой части.
Наверное, желательно, чтобы вы уже проходили этот МК, чтобы точно понимать о чём речь.
Вот финальный код:

let mainImage = document.querySelector('.main-image');
let previews = document.querySelectorAll('.slider-preview-item a');
for (let activeImage of previews) {
  activeImage.onclick = function (evt) {
  evt.preventDefault();
  mainImage.src = activeImage.href;
  let currentActive = document.querySelector('.slider-preview-item .active');
  currentActive.classList.remove('active');
  activeImage.classList.add('active');
  }; 
}

Прошу у знающих пояснения для чего при объявлении в обработчике переменной currenActive в скобках нужна была именно такая запись через 2 селектора.
Т.е. (document.querySelector(’.slider-preview-item .active’);
Мог ли я использовать просто document.querySelector(’.active’);

И вообще в каких случаях нужна подобная запись через несколько селекторов и для чего это.