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

Question

Я работаю над страницей, где выбранный элемент в списке характеризуется НЕ имеющим данный класс.Что-то вроде следующего:

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

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

document.querySelectorAll('li.a')

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

Любой опыт работы стакой сценарий?

Answer 1

Вы можете использовать псевдо: not (), это именно то, что вам нужно для этой работы.

https://developer.mozilla.org/en-US/docs/Web/CSS/:not

Все, что вам нужно сделать, это

document.querySelector(".a:not(.b)")

Но также рассмотрите возможность использования jQuery, например

$(".someclass").not(".another")

Stansard querySelector быстрее, jQ более читабелен.

Answer 2

Помимо Temanis answer в этом случае вы можете использовать селектор not

document.querySelectorAll('li.a:not(.b)')

Answer 3

В таком случае вы можете рассматривать атрибут селектора следующим образом:

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

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

<ul>
  <li class="a">Select me</li>
  <li class="a b c d more classes">Don't select me</li>
  <li class="a b">Don't select me</li>
  <li class="a">Select me</li>
</ul>

Просто обратите внимание на дополнительные пробелы:

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

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

<ul>
  <li class="a ">Pay attention to this one !!</li>
  <li class="a b">Don't select me</li>
  <li class="a">Select me</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 ">Pay attention to this one !!</li>
  <li class="a b">Don't select me</li>
  <li class="a">Select me</li>
</ul>