Псевдокласс :not [2/20]
Псевдокласс :not(селектор) является отрицающим селектором. С его помощью можно выбрать элементы, которые НЕ содержат указанный селектор:
li:not(:last-child) { }
Этот селектор выберет все теги <li>, НЕ являющиеся последними в их родителе.
Псевдокласс :not похож на оператор ! в программировании:
if (!selector) { ... }
В качестве селектора могут указываться псевдоклассы, теги, идентификаторы, классы и селекторы атрибутов. Нельзя использовать двойной псевдокласс :not, то есть конструкция:not(:not(...)) не сработает.
Также в комбинации с :not не применяются:
объединение селекторов: например, li:not(.heart.jack) – некорректный селектор;
псевдоэлементы: li:not(::after) – неправильная запись (подробнее о псевдоэлементах рассказано далее в курсе);
селекторы-потомки, групповые селекторы или комбинации: например, нельзя писатьli:not(a span) или li:not(a + span).
style2-2.html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Псевдокласс :not</title>
<link rel="stylesheet" href="https://htmlacademy.ru/assets/course57/course.css">
<style>
.cards li:not(.king) {
background-color: #808080;
}
.cards li:not(.diamond) {
color: #0099ff;
}
.cards li:not(:nth-child(1)) {
font-family: "Arial", sans-serif;
}
</style>
</head>
<body>
<ul class="cards">
<li class="ace heart"></li>
<li class="king diamond"></li>
<li class="queen club"></li>
<li class="jack spade"></li>
<li class="king club"></li>
<li class="ace spade"></li>
<li class="jack heart"></li>
</ul>
<ul class="cards">
<li class="jack diamond"></li>
<li class="ace club"></li>
<li class="king spade"></li>
<li class="queen heart"></li>
<li class="queen spade"></li>
<li class="king heart"></li>
<li class="ace diamond"></li>
</ul>
<ul class="cards">
<li class="queen spade"></li>
<li class="king heart"></li>
<li class="king club"></li>
<li class="ace spade"></li>
<li class="jack heart"></li>
<li class="queen diamond"></li>
<li class="ace diamond"></li>
</ul>
<ul class="cards">
<li class="queen spade"></li>
<li class="ace spade"></li>
<li class="jack heart"></li>
<li class="ace spade"></li>
<li class="ace heart"></li>
<li class="queen diamond"></li>
<li class="ace diamond"></li>
</ul>
</body>
</html>
Комбинируем :not [3/20]
Отрицающий селектор :not, как и любые другие селекторы, можно комбинировать с другими. Например:
li:not(:first-child):not(:last-child) { }
Выберет все теги <li>, которые НЕ являются первыми и последними в их родителе.
Объединять можно неограниченное количество селекторов.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Комбинируем :not</title>
<link rel="stylesheet" href="/assets/course57/course.css">
<style>
.cards li:first-child:not(.spade) {
background: #ff3300;
}
.cards li:nth-child(4):not(.ace):not(.diamond) {
background: #339933;
}
.cards li.heart:not(:first-child):not(.queen):not(.jack) {
background: #0099ff;
}
</style>
</head>
<body>
<ul class="cards">
<li class="ace heart"></li>
<li class="king diamond"></li>
<li class="queen club"></li>
<li class="jack spade"></li>
<li class="king club"></li>
<li class="ace spade"></li>
<li class="jack heart"></li>
</ul>
<ul class="cards">
<li class="jack diamond"></li>
<li class="ace club"></li>
<li class="king spade"></li>
<li class="queen heart"></li>
<li class="queen spade"></li>
<li class="king heart"></li>
<li class="ace diamond"></li>
</ul>
<ul class="cards">
<li class="queen spade"></li>
<li class="king heart"></li>
<li class="king club"></li>
<li class="king diamond"></li>
<li class="jack heart"></li>
<li class="queen diamond"></li>
<li class="ace diamond"></li>
</ul>
<ul class="cards">
<li class="queen spade"></li>
<li class="ace spade"></li>
<li class="jack heart"></li>
<li class="ace spade"></li>
<li class="ace heart"></li>
<li class="queen diamond"></li>
<li class="ace diamond"></li>
</ul>
</body>
</html>