Как получить элементы, у которых отсутствует определённый класс?

Question

[DZHAMBUALT]

Мне нужно получить элемент по классу element-1, у которого не будет класса none. Как это сделать? Я пытался вот так сделать, но мне возвращалась пустая коллекция:

const element = document.querySelectorAll(
    !(`.${.element-1}` && ".none") && `.${.element-1}`
  );
// И ТАК ТОЖЕ ПЫТАЛСЯ
const element= document.querySelectorAll(
   `.${.element-1}` && !".none"
  );

<div class="container">
  <div class="element-1"></div>
  <div class="element-1"></div>
  <div class="element-1"></div>
  <div class="element-1"></div>
  <div class="element-1"></div>
  <div class="element-1"></div>
  <div class="element-1 none"></div>
  <div class="element-1"></div>
  <div class="element-1"></div>
  <div class="element-1 none"></div>
</div>

Comments

[Ankhena]

.element-1:not(.none)

[DZHAMBUALT]

Ankhena, Это в JS или в CSS?

[Ankhena]

DZHAMBUALT, селекторы и там и там работают одинаково

[DZHAMBUALT]

Спасибо вам добрый человек!

Answer 1

[VoidVolker]

Документацию внимательнее читать следует:

document.querySelectorAll(selectors)

selectors

Строка DOMString, содержащая один или более CSS селектор (en-US). Эта строка должна быть валидным CSS селектором. Если это не так, то генерируется SyntaxError. Смотрите Поиск элементов DOM с использованием селекторов для получения информации о том, распознавать элементы. Несколько селекторов нужно разделить запятыми.

https://developer.mozilla.org/ru/docs/Web/API/Docu...

В данном случае надо получить сначала список элементов с нужным классом, а потом отфильтровать в нем те, у которых отсутствует не нужный класс. Можно ручками, можно селектором.

Comments

[DZHAMBUALT]

А так сразу с querySelector-ом не получиться да?

[VoidVolker]

Можно вполне, ссылочку уже добавил на доку.