Почему :not() выдаёт в обоих случаях true?

Question

[Omefoxer]

Здравствуйте, может я чего-то не понимаю или не до конца понял, но почему :not() в обоих случаях, даже когда внутренний результат true выдаёт true?
Я просто думал, что если :not() даст false, то правило не исполнится, но оно исполнилось.

В других вариантах (без класса .tab) такого нет.

.tab:not(input[type="radio"][name="tab"]:checked) {
    background: #6e7080;
}

<div class="left-tool-panel">
      <div class="tabs">
        <div class="tab">
          <input type="radio" name="tab" id="tab-info" checked>
          <label for="tab-info">Info</label>
        </div>
        <div class="tab">
          <input type="radio" name="tab" id="tab-tools">
          <label for="tab-tools">Tools</label>
        </div>
      </div>
    </div>

Answer 1

[Rsa97]

Так элемент с классом tab у вас и не попадает под условие в :not, так что всё верно находит.
Если вам нужен элемент с классом tab не содержащий определённый input, то это селектор :not(:has()), но :has пока работает не во всех браузерах.

Comments

[Omefoxer]

Спасибо большое, помог второй вариант с :has(), но вот первый я пробовал и вместо одного, свойства воздействуют на все tab'ы.

[Rsa97]

Omefoxer,
Ваша запись читается как "элемент с классом tab, при этом не являющийся input..."