Эксклюзивный селектор CSS

Question

Я работаю над страницей, где выбранный элемент в списке не имеет данного класса. Примерно так:

<ul>
  <li class="a">not selected</li>
  <li class="a b">selected</li>
  <li class="a">not selected</li>
</ul>

Я хотел бы определить селектор CSS, чтобы захватить узел li на странице, имеющей только класс a.
Неудивительно, что следующего утверждения недостаточно:

document.querySelectorAll('li.a')

Потому что он возвращает все узлы li, имеющие класс a.

Есть ли идеи, как выполнить такой сценарий?

_{Свободный перевод вопроса Exclusive CSS selector от участника @Alberto De Caro.}

Answer 1

В таком случае вы можете рассмотреть такой селектор атрибутов:

console.log(document.querySelectorAll('li[class="a"]').length)

li[class="a"] {
  color:red;
}

<ul>
  <li class="a">Выберите меня</li>
  <li class="a b c d more classes">Не выбирай меня</li>
  <li class="a b">Не выбирай меня</li>
  <li class="a">Выберите меня</li>
</ul>

Просто обратите внимание на лишнее пространство:

console.log(document.querySelectorAll('li[class="a"]').length)

li[class="a"] {
  color:red;
}

<ul>
  <li class="a ">Обратите внимание на это !!</li>
  <li class="a b">Не выбирай меня</li>
  <li class="a">Выберите меня</li>
</ul>

Но поскольку вы используете JS, вы можете использовать trim(), чтобы избавиться от лишних пробелов:

var elem=document.querySelectorAll('li');
for(var i=0;i<elem.length;i++)
  elem[i].className=elem[i].className.trim();

console.log(document.querySelectorAll('li[class="a"]').length)

li[class="a"] {
  color:red;
}

<ul>
  <li class="a ">Обратите внимание на это!!</li>
  <li class="a b">Не выбирай меня</li>
  <li class="a">Выберите меня</li>
</ul>

_{Свободный перевод ответа от участника @Temani Afif.}

Answer 2

console.log(document.querySelectorAll(".a:not(.b)"))

<ul>
  <li class="a">not selected</li>
  <li class="a b">selected</li>
  <li class="a ">not selected</li>
</ul>

БЛОГ НА HUSL

Эксклюзивный селектор CSS

Ответы (2 шт):