Зачем нужен div.green в моём случае?

Question

[boluchevskii]

Вывести 4 красных квадрата, при клике на любой, он становиться зеленым, при этом если есть уже зеленый квадрат, то он становиться обратно красным и так можно кликать на любой квадрат, он становиться зеленым, а старый зеленый квадрат обратно крассным и тд.

Не понимаю, почему нужно писать div.green, а не, например, square.green в отмеченной строке. Помогите, пожалуйста, подробно разобраться.

<div id="js" class="box">
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
  </div>

.box {
	display: flex;
	flex-direction: row;
	gap: 10px;
  }
  
  .square {
	width: 70px;
	height: 70px;
	background-color: red;
	cursor: pointer;
  }
  
  .green { background-color: green; }

let box = document.querySelector('#js');
    box.addEventListener('click', (event) => {
    if (!event.target.classList.contains('square')) {
      return; 
    }
    document.querySelector('div.green')?.classList.remove('green'); //вот тут!
    event.target.classList.add('green');
    })

Comments

[Ankhena]

а не, например, square.green в отмеченной строке

Потому что тега square не существует.
Можете писать .square.green, если есть гарантия, что они все будут иметь класс square

https://developer.mozilla.org/ru/docs/Web/CSS/CSS_...

Answer 1

[HardBot]

div - это тег, а .green класс в div.

Скажем, если у тебя есть такой элемент , то он будет искать исключительно только в div, не в h1, не в p

То есть, если ты укажешь просто .green, то он будет искать этот класс абсолютно в любых тегах. В твоём случае, тебе нужно как-раз таки в square green исксть, т.к. сейчас он ищет этот класс в каждому теге div

Answer 2

[Stalker_RED]

Читайте про css селекторы. Какие они вообще есть, выборку по тегу, по id, атрибуту, как они комбинируются, что такое селективность (приоритет).