Михаил Р.

Как выделить мышкой область на странице и присвоить класс элементам попавшим в эту область?

Может кто нибудь предложит решение на примере со скришота

Стандартными методами css это не сделать. Может через less? Но как?

.fn(@aspect-class) {
  @matches: ~`@{aspect-class}.match(/\d+/g)`;
  @a: e(%(`@{matches}[0]`));
  @b: e(%(`@{matches}[1]`));
  // остальная логика
}

.fn(aspect-43-34);

.table__item {
  // ...
  @media (max-width: 880px) {
    padding: 15px;
}

.container__products {
  margin-top: clamp(
    30px, 
    calc(9vw + (1000px - 100vw) * 0.06), 
    90px
  );
}

:root {
  --min-margin: 30px;
  --max-margin: 90px;
  --min-width: 700px;
  --max-width: 1000px;
}

.container__products {
  margin-top: clamp(
    var(--min-margin), 
    calc(
      var(--min-margin) + 
      (var(--max-margin) - var(--min-margin)) * 
      ((100vw - var(--min-width)) / (var(--max-width) - var(--min-width)))
    ), 
    var(--max-margin)
  );
}

что делать?

const list = {
    'Audi': 'Audi AG — немецкая автомобилестроительная компания в составе концерна Volkswagen Group, специализирующаяся на выпуске автомобилей под маркой Audi. Штаб-квартира расположена в Ингольштадте.',
    'Volkswagen': 'Volkswagen — немецкая автомобильная марка, одна из многих, принадлежащих концерну Volkswagen AG. Под этой маркой в 2007 году было реализовано 5 млн 20 тыс. автомобилей. Штаб-квартира — в Вольфсбурге.',
    'Opel': 'Adam Opel AG — немецкий производитель автомобилей. Штаб-квартира расположена в Рюссельсхайме, Германия. Компания была основана 21 января 1863 года и приступила к выпуску автомобилей в 1899 году. С 1929 года принадлежала концерну General Motors.'
}

document.addEventListener('DOMContentLoaded', () => {
    const select = document.querySelector('#select');
    const output = document.querySelector('#output');

    select.addEventListener('change', () => {
        output.textContent = list[select.value];
    });
});

КартинкО

img {
    image-rendering: optimizeQuality;
}

<object type="image/svg+xml" data="img.svg" width="100" height="100"></object>

<embed type="image/svg+xml" src="img.svg" width="100" height="100"/>