Если без привлечения лишних сущностей, то можно, например, так...
<!doctype html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.main_container {
display: flex;
height: 8vmax;
width: 8vmax;
}
.main_container > .container {
height: 2vmax;
width: 2vmax;
border: 1px solid #0000CD;
box-sizing: border-box;
}
</style>
<script>
document.addEventListener("click", event => {
const container = event.target.closest(".main_container > .container");
if(container) {
const root = container.parentNode;
if(root._lastContainer)
root._lastContainer.style.backgroundColor = "";
container.style.backgroundColor = "rgba(192, 192, 192, 0.25)";
root._lastContainer = container;
}
});
</script>
</head>
<body>
<div class="main_container">
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
</div>
</body>
</html>
рони, можно ведь запомнить, какой был выбран? Проверьте, что будет, если добавить ещё один
main_container