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>
Результат
Имя | Фамилия | Положение |
Гомер | Симпсон | отец |
Мардж | Симпсон | мать |
Барт | Симпсон | сын |
Лиза | Симпсон | дочь |
Мэгги | Симпсон | дочь |