Селекторы, часть 2 / Псевдокласс :nth-last-child [4/20]
×

Псевдокласс :nth-last-child [4/20]

В первом курсе про селекторы мы уже рассматривали псевдокласс :nth-child, сейчас посмотрим на :nth-last-child.

Псевдокласс :nth-last-child используется для добавления стиля к элементам на основе нумерации в дереве элементов. В отличие от псевдокласса :nth-child, отсчет ведется не от первого элемента, а от последнего. Вот и все различия.

Подробнее об :nth-child и синтаксисе выражений рассказано в пошаговой демонстрации Использование псевдокласса :nth-child

Выполнить задание
HTML
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Псевдокласс :nth-last-child</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. Задайте всем картам предпоследней строки фон #ff3300.
  2. Затем задайте предпоследней карте в каждой строке фон #339933.
  3. Затем задайте карте на пересечении выделенной строки и столбца фон #0099ff.
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

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

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

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

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