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

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

Псевдокласс :first-child выбирает первый элемент в группе соседних элементов.

Например:

<section>
  <p>This paragraph will be blue and bold.</p>
  <p>This paragraph will have default styling.</p>
</section>

Любой абзац, который является первым дочерним элементом внутри своего родителя, будет окрашен в синий цвет и иметь жирный шрифт.

p:first-child {
  color: blue;
  font-weight: bold;
}

Вы можете комбинировать и применять селекторы потомков, дочерние и другие селекторы, чтобы выбирать элементы более точно. Вот еще один пример:

div:first-child h1 {
 color: red;
}

Это выбирает первый элемент div среди его соседних элементов, а затем меняет цвет текста тега <h1> внутри него на красный.

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

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

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

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

Задание

Легко

Создайте CSS-правило, которое выбирает первый элемент списка (<li>) в любом маркированном списке (<ul>) и задает ему следующие стили:

Цвет текста blue
Цвет фона light yellow
Внутренний отступ слева 10 pixels

Шпаргалка

Псевдокласс :first-child выбирает первый элемент в группе соседних элементов.

p:first-child {
  color: blue;
  font-weight: bold;
}

Вы можете комбинировать :first-child с другими селекторами для более точного выбора:

div:first-child h1 {
  color: red;
}

Это выбирает первый элемент div среди его соседних элементов, а затем находит тег h1 внутри него.

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

<!DOCTYPE html>
<html>
<head>
    <title>Targeting the First Child</title>
  <style>
    /* Write your CSS rule here */
    
  </style>
</head>
<body>
  <h2>Grocery List</h2>
  <ul>
    <li>Fresh Apples</li>
    <li>Organic Bananas</li>
    <li>Whole Wheat Bread</li>
  </ul>
  
  <h2>To-Do List for the Day</h2>
  <ul>
    <li>Complete coding challenge</li>
    <li>Go for a walk in the park</li>
  </ul>
</body>
</html>

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

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