Селекторы, часть 2 / Псевдокласс :not [2/20]
×

Псевдокласс :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).
Хотите верстать адаптивно, использовать БЭМ и LESS? Тогда записывайтесь на наш продвинутый интенсив.

Выполнить задание
HTML
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Псевдокласс :not</title> <link rel="stylesheet" href="/assets/course57/course.css"> </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>
CSS
HTML Academy
  1. Всем картам, кроме королей .king, задайте фон #808080.
  2. Всем картам, кроме бубновых .diamond, задайте цвет текста #0099ff.
  3. Всем картам, кроме первых в строке, задайте шрифт "Arial", sans-serif.
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

Обсуждение и комментарии

Если у вас возникли сложности при прохождении задания, то вы можете обратиться за помощью на наш форум. Мы отслеживаем сообщения и постараемся ответить максимально быстро.

Пожалуйста, не пишите решение задач. Такие сообщения будут удаляться.

Перейти на форум или открыть комментарии.