Селекторы, часть 1 / Псевдокласс :nth-child [10/18]
×

Псевдокласс :nth-child [10/18]

Псевдоклассы из предыдущего примера относятся к семейству псевдоклассов, помогающих выбирать элементы по их расположению.

Вспомним задание 4. В нём каждому тегу <li> был задан собственный класс. Используя классы, мы могли выбрать любой из пяти тегов. Если бы тегов было десять, то пришлось бы использовать десять разных классов.

С помощью псевдокласса nth-child можно выбирать теги по порядковому номеру, не используя классы. Синтаксис псевдокласса: селектор:nth-child(выражение). Выражением может быть число или формула. Например:

1. li:nth-child(2) { ... }
2. li:nth-child(4) { ... }
3. li:nth-child(2n) { ... }

Первый селектор выберет второй элемент списка, второй селектор — четвёртый элемент списка, третий селектор — все чётные элементы.

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

Выполнить задание
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Псевдокласс :nth-child</title> <link rel="stylesheet" href="/assets/course7/course-1.css"> </head> <body> <ul class="target"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </body> </html>
CSS
HTML Academy

К сожалению, наш спортсмен выбывает из борьбы за третье место.

  1. Биатлонист попал по всем мишеням, кроме третьей и четвёртой.

    Образец попадания по мишеням
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

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

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

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

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