Селектор для элемента, имеющего один из двух классов, но не оба

Question

Как выбрать элементы, имеющие один из двух классов, но не оба?

Я пробовал :not(.class1, .class2) и :not(.class1):not(.class2), но они, кажется, выбирают элементы, пропускающие любой класс. Мне нужно выбрать элементы, которые не имеют обоих классов.

Я также пытался :not([class='class1 class2']) , поскольку этот принятый ответ гласит , но, похоже, ничего не выбирается.

Вот пример того, что я хочу -

ul.tabs > li.active:not([class='first last']) {
    background-color: #F00;
}

<ul class="tabs">
    <li class="first">1st</li>
    <li class="active last">2nd</li> <!-- Should be red -->
</ul>

<ul class="tabs">
    <li class="active first last">1st</li> <!-- Should NOT be red -->
</ul>

У <li> есть другие классы, за которые я не отвечаю. Мне интересно, есть ли способ игнорировать других классов для последнего селектора, который я пробовал.

Answer 1

Требуется :not(.first), :not(.last), то есть версия :not(.first.last), поддерживаемая Селектором уровня 3 (из Селекторов 4, пока не поддерживается всеми браузерами, а также jQuery):

ul.tabs > li.active:not(.first), ul.tabs > li.active:not(.last) {
    background-color: #F00;
}

<ul class="tabs">
    <li class="first">1st</li>
    <li class="active last">2nd</li>
</ul>

<ul class="tabs">
    <li class="active first last">1st</li>
</ul>

Однако, как указывает Рунин, вы можете просто использовать :first-of-type и :last-of-type или :first-child и :last-child вместораздувания разметки с помощью «первого» и «последнего» классов (если эти классы представляют то же самое, что и псевдоклассы).

Фактически, если вы переключитесь на эти псевдоклассы, вы можетеупростите ваш CSS до одного селектора, сжав :not(:first-of-type), :not(:last-of-type) до :not(:only-of-type):

ul.tabs > li.active:not(:only-of-type) {
    background-color: #F00;
}

<ul class="tabs">
    <li>1st</li>
    <li class="active">2nd</li>
</ul>

<ul class="tabs">
    <li class="active">1st</li>
</ul>

Answer 2

В этой ситуации вы можете использовать два псевдокласса CSS:

• :first-of-type
• :last-of-type

и воспользоватьсякаскад CSS, объявив правило для :first-of-type ниже правила для :last-of-type.

Рабочий пример:

.tabs li:last-of-type.active {background-color: rgb(255, 0, 0);}
.tabs li:first-of-type.active {background-color: transparent;}

<ul class="tabs">
<li>1st</li>
<li class="active">2nd</li> <!-- Should be red -->
</ul>

<ul class="tabs">
<li class="active">1st</li> <!-- Should NOT be red -->
</ul>