CSS псевдокласс :not

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

/* Выбор всех элементов <p>, у которых атрибут class не
   содержит в значении слово bold */
p:not(.bold) { font-style: italic; }

/* Выбор всех элементов, имеющих атрибут class,
значение которого содержит слово bold, если они
не являются элементами <p> или <div> */
.bold:not(p, div) { font-style: italic; }
        /* эквивалентно */
.bold:not(p):not(div) { font-style: italic; }

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

:not(span, p::first-letter) {...}
        /* или */
:not(div:salt) {...}

Так как псевдокласс :not() предотвращает выбор элементов, его также называют псевдоклассом отрицания.

Псевдокласс :not() можно использовать для повышения специфичности всего селектора. Сам по себе псевдокласс :not() не повышает специфичность, но её можно повысить за счёт добавления любого селектора внутри него:

#goal:not(#team) {...}

Этот селектор будет соответствовать тому же элементу, что и простой селектор #goal, но будет иметь более высокую специфичность из-за двух селекторов идентификаторов.

Пример

table { 
  width: 70%; 
  border-collapse: collapse;
}

td { 
  border: 1px solid #C2C2FF; 
  padding: 3px 7px; 
}

td:not(td:first-child, td:last-child) {
  background-color: #9999FF;
  color: white;
}

<table>
  <tr><td>Имя</td><td>Фамилия</td><td>Положение</td></tr>
  <tr><td>Гомер</td><td>Симпсон</td><td>отец</td></tr>
  <tr><td>Мардж</td><td>Симпсон</td><td>мать</td></tr>
  <tr><td>Барт</td><td>Симпсон</td><td>сын</td></tr>
  <tr><td>Лиза</td><td>Симпсон</td><td>дочь</td></tr>
  <tr><td>Мэгги</td><td>Симпсон</td><td>дочь</td></tr>
</table>