Выбор последнего дочернего элемента

Часть раздела CSS Mastery путешествия по HTML на Coddy — урок 14 из 43.

Псевдокласс :last-child выбирает элементы, которые являются последними дочерними элементами своего родителя.

Например:

<div class="parent">
  <p>First paragraph</p>
  <p>Middle paragraph</p>
  <p>Last paragraph</p>
</div>

Чтобы стилизовать только последний абзац, используйте псевдокласс :last-child:

p:last-child {
  color: red;
  font-weight: bold;
}

После применения этого CSS только «Last paragraph» станет красным и жирным, так как это последний дочерний элемент родительского div.

Проверьте себя

В этом уроке есть небольшой тест. Начните урок, чтобы ответить на вопросы и сохранить прогресс.

Проверьте себя

В этом уроке есть небольшой тест. Начните урок, чтобы ответить на вопросы и сохранить прогресс.

Задание

Легко

Создайте правило CSS для стилизации последнего элемента <p> в любой группе абзацев.

Стилизуйте его с помощью синего цвета фона (#046ae0) и белого текста.
Установите насыщенность шрифта (font weight) последнего абзаца на bold.

Шпаргалка

Псевдокласс :last-child выбирает элементы, которые являются последним дочерним элементом своего родителя:

p:last-child {
  color: red;
  font-weight: bold;
}

Это применит стили только к последнему элементу абзаца внутри его родительского контейнера.

Попробуйте сами

<!DOCTYPE html>
<html>
<head>
    <title>Targeting the Last Child</title>
  <style>
    /* Write your CSS rule here */

  </style>
</head>
<body>
    <div> 
        <h2>Exploring the Universe</h2>
        <p>The universe is vast, with countless stars and galaxies waiting to be discovered.</p>
        <p>New technologies allow us to explore deeper into space, revealing its many secrets.</p>
        <p>We continue to learn more about distant planets and the possibility of life beyond Earth.</p> 
    </div>
    <div>
        <h2>The Deep Ocean</h2>
        <p>Our oceans are mysterious, covering most of Earth, yet we know so little about them.</p>
        <p>Many species live in extreme conditions, some of which are still being discovered today.</p>
        <p>Exploring the ocean depths gives us insights into life at the planet's most remote locations.</p> 
    </div>
</body>
</html>

Проверьте себя

В этом уроке есть небольшой тест. Начните урок, чтобы ответить на вопросы и сохранить прогресс.