логотип PurpleSchool
логотип PurpleSchool
Главная
База знаний
css
Псевдоклассы в CSS
Псевдоклассы группы child в CSS. Полное руководство с примерами

Псевдоклассы группы child в CSS. Полное руководство с примерами

25 апреля 2025
Автор

Дмитрий Нечаев

Псевдоклассы группы child в CSS позволяют выбирать элементы не по классу или тегу, а по их порядковому номеру среди родительских элементов. Это мощный инструмент для точной стилизации элементов, исходя из их положения в структуре HTML-документа. В этой статье мы рассмотрим основные псевдоклассы группы child, их применение и приведем примеры для различных ситуаций.

Основные псевдоклассы группы child

:first-child

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

Пример использования:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    p:first-child {
      color: blue; /* Изменение цвета текста первого дочернего абзаца */
    }
  </style>
  <title>:first-child</title>
</head>
<body>
  <div>
    <p>Первый абзац.</p>
    <p>Второй абзац.</p>
  </div>
</body>
</html>

В этом примере первый абзац внутри <div> будет синим.

:last-child

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

Пример использования:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    p:last-child {
      color: red; /* Изменение цвета текста последнего дочернего абзаца */
    }
  </style>
  <title>:last-child</title>
</head>
<body>
  <div>
    <p>Первый абзац.</p>
    <p>Второй абзац.</p>
  </div>
</body>
</html>

В этом примере последний абзац внутри <div> будет красным.

:nth-child(n)

Псевдокласс :nth-child(n) выбирает n-ный дочерний элемент своего родителя. N может быть числом, ключевым словом или формулой.

Пример использования:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    li:nth-child(2) {
      background-color: yellow; /* Изменение фона второго элемента списка */
    }
  </style>
  <title>:nth-child</title>
</head>
<body>
  <ul>
    <li>Элемент 1</li>
    <li>Элемент 2</li>
    <li>Элемент 3</li>
  </ul>
</body>
</html>

В этом примере второй элемент списка будет с жёлтым фоном.

Использование формулы

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

Пример:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    li:nth-child(odd) {
      background-color: #f0f0f0; /* Изменение фона нечётных элементов списка */
    }

    li:nth-child(even) {
      background-color: #ccc; /* Изменение фона чётных элементов списка */
    }
  </style>
  <title>:nth-child с формулой</title>
</head>
<body>
  <ul>
    <li>Элемент 1</li>
    <li>Элемент 2</li>
    <li>Элемент 3</li>
    <li>Элемент 4</li>
    <li>Элемент 5</li>
  </ul>
</body>
</html>

В этом примере фон нечётных элементов списка будет светло-серым, а чётных — более тёмным.

:nth-last-child(n)

Псевдокласс :nth-last-child(n) выбирает n-ный дочерний элемент с конца своего родителя.

Пример использования:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    li:nth-last-child(2) {
      background-color: lightgreen; /* Изменение фона предпоследнего элемента списка */
    }
  </style>
  <title>:nth-last-child</title>
</head>
<body>
  <ul>
    <li>Элемент 1</li>
    <li>Элемент 2</li>
    <li>Элемент 3</li>
    <li>Элемент 4</li>
    <li>Элемент 5</li>
  </ul>
</body>
</html>

В этом примере предпоследний элемент списка будет с светло-зелёным фоном.

:only-child

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

Пример использования:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    p:only-child {
      font-style: italic; /* Курсив для единственного дочернего элемента */
    }
  </style>
  <title>:only-child</title>
</head>
<body>
  <div>
    <p>Я единственный абзац внутри этого div.</p>
  </div>
  <div>
    <p>Я не единственный абзац.</p>
    <p>Я тоже не единственный абзац.</p>
  </div>
</body>
</html>

В этом примере абзац внутри первого <div> будет курсивным.

Комбинирование псевдоклассов группы child

Псевдоклассы группы child можно комбинировать с другими селекторами и псевдоклассами для создания более сложных и точных правил стилизации.

Комбинирование с селекторами по классу

Пример:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .item:nth-child(3) {
      font-weight: bold; /* Жирный шрифт для третьего элемента с классом item */
    }
  </style>
  <title>Комбинирование с классами</title>
</head>
<body>
  <div class="item">Элемент 1</div>
  <div class="item">Элемент 2</div>
  <div class="item">Элемент 3</div>
  <div class="item">Элемент 4</div>
</body>
</html>

Комбинирование с псевдоклассами :hover и :focus

Пример:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    li:nth-child(2):hover {
      color: red; /* Изменение цвета текста при наведении на второй элемент списка */
    }

    li:nth-child(3):focus {
      background-color: lightblue; /* Изменение фона при фокусе на третьем элементе списка */
    }
  </style>
  <title>Комбинирование с :hover и :focus</title>
</head>
<body>
  <ul>
    <li tabindex="0">Элемент 1</li>
    <li tabindex="0">Элемент 2</li>
    <li tabindex="0">Элемент 3</li>
    <li tabindex="0">Элемент 4</li>
  </ul>
</body>
</html>

Примеры использования в реальных проектах

Таблица с чередующимися строками

Использование псевдокласса :nth-child для создания таблицы с чередующимися строками:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    table {
      width: 100%;
      border-collapse: collapse;
    }

    th, td {
      padding: 10px;
      border: 1px solid #ccc;
    }

    tr:nth-child(even) {
      background-color: #f2f2f2; /* Изменение фона чётных

 строк таблицы */
    }
  </style>
  <title>Чередующиеся строки таблицы</title>
</head>
<body>
  <table>
    <thead>
      <tr>
        <th>Заголовок 1</th>
        <th>Заголовок 2</th>
        <th>Заголовок 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Ячейка 1</td>
        <td>Ячейка 2</td>
        <td>Ячейка 3</td>
      </tr>
      <tr>
        <td>Ячейка 4</td>
        <td>Ячейка 5</td>
        <td>Ячейка 6</td>
      </tr>
      <tr>
        <td>Ячейка 7</td>
        <td>Ячейка 8</td>
        <td>Ячейка 9</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

Список с выделением первых элементов

Использование псевдокласса :first-child для выделения первых элементов списка:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    ul {
      list-style-type: none;
      padding: 0;
    }

    ul li:first-child {
      background-color: #007bff;
      color: white;
      padding: 10px;
      margin-bottom: 5px;
    }
  </style>
  <title>Выделение первых элементов списка</title>
</head>
<body>
  <ul>
    <li>Первый элемент</li>
    <li>Второй элемент</li>
    <li>Третий элемент</li>
  </ul>
</body>
</html>

Заключение

Псевдоклассы группы child в CSS предоставляют мощный способ для выбора и стилизации элементов на основе их порядкового номера. Они позволяют создавать более точные и гибкие правила стилизации, улучшая внешний вид и функциональность веб-страниц. Понимание различных псевдоклассов группы child и их правильное использование помогает разработчикам создавать адаптивные и поддерживаемые стили. Экспериментируйте с различными подходами и находите оптимальные решения для ваших проектов.

Стрелочка влевоПсевдокласс default в CSS. Полное руководство с примерамиПсевдокласс checked в CSS. Полное руководство с примерамиСтрелочка вправо

Все гайды по Css

Полное руководство по использованию свойства will-change в CSSПолное руководство по свойству transform-style в CSSУправление точкой опоры трансформаций в CSS с помощью transform-originИспользование функций CSS-трансформации; Полное руководствоПолное руководство по свойству transform-box в CSSУправление элементами с помощью свойства transform в CSSПолное руководство по свойству perspective-origin в CSSПолное руководство по свойству perspective в CSSПолное руководство по свойству backface-visibility в CSS
Универсальный селектор в CSS. Полное руководство с примерамиСелектор по тегу в CSS. Полное руководство с примерамиПеречисление селекторов в CSS. Полное руководство с примерамиСелектор потомка в CSS. Полное руководство с примерамиСелектор по идентификатору в CSS; Полное руководство с примерамиКомбинированные селекторы в CSS; Полное руководство с примерамиСелектор по классу в CSS; Полное руководство с примерамиСелектор по атрибуту в CSS; Полное руководство с примерами
Псевдокласс selection. Полное руководство с примерамиПсевдоэлементы в CSS. Полное руководство с примерамиПсевдоэлемент placeholder в CSS. Полное руководство с примерамиПсевдоэлемент marker в CSS. Полное руководство с примерамиПсевдоэлемент first-line в CSS. Полное руководство с примерамиПсевдоэлемент first-letter в CSS. Полное руководство с примерамиСвойство content в CSS. Полное руководство с примерамиПсевдоэлемент before в CSS. Полное руководство с примерамиПсевдоэлемент backdrop в CSS. Полное руководство с примерамиПсевдоэлемент after в CSS. Полное руководство с примерами
Псевдокласс where в CSS. Полное руководство с примерамиПсевдокласс visited в CSS. Полное руководство с примерамиПсевдоклассы группы type в CSS. Полное руководство с примерамиПсевдокласс target в CSS. Полное руководство с примерамиПсевдокласс root в CSS. Полное руководство с примерамиПсевдокласс required в CSS. Полное руководство с примерамиПсевдоклассы в CSS. Полное руководство с примерамиПсевдокласс placeholder-shown в CSS. Полное руководство с примерамиПсевдокласс optional в CSS. Полное руководство с примерамиПсевдокласс not в CSS. Полное руководство с примерамиПсевдокласс link в CSS. Полное руководство с примерамиПсевдокласс lang в CSS. Полное руководство с примерамиПсевдокласс is в CSS. Полное руководство с примерамиПсевдоклассы invalid и valid в CSS. Полное руководство с примерамиПсевдокласс indeterminate в CSS. Полное руководство с примерамиПсевдоклассы in-range и out-of-range. Полное руководство с примерамиПсевдокласс hover в CSS. Полное руководство с примерамиПсевдокласс has в CSS. Полное руководство с примерамиПсевдокласс focus-within в CSS. Полное руководство с примерамиПсевдокласс focus-visible в CSS. Полное руководство с примерамиПсевдокласс focus в CSS. Полное руководство с примерамиПсевдокласс empty в CSS. Полное руководство с примерамиПсевдоклассы disabled и enabled в CSS. Полное руководство с примерамиПсевдокласс default в CSS. Полное руководство с примерамиПсевдоклассы группы child в CSS. Полное руководство с примерамиПсевдокласс checked в CSS. Полное руководство с примерамиПсевдокласс active в CSS. Полное руководство с примерами
Функция var в CSS. Полное руководство с примерамиФункция url в CSS. Полное руководство с примерамиФункция repeating-radial-gradient в CSS. Полное руководство с примерамиФункция repeating-linear-gradient в CSS. Полное руководство с примерамиФункция repeating-conic-gradient в CSS. Полное руководство с примерамиФункция radial-gradient в CSS. Полное руководство с примерамиФункция min в CSS. Полное руководство с примерамиФункция max в CSS. Полное руководство с примерамиФункция linear-gradient в CSS. Полное руководство с примерамиФункция image-set в CSS. Полное руководство с примерамиФункции фильтров в CSS. Полное руководство с примерамиФункция conic-gradient в CSS. Полное руководство с примерамиФункция clamp в CSS. Полное руководство с примерамиФункция calc в CSS. Полное руководство с примерамиФункция attr в CSS. Полное руководство с примерами
Вендорные префиксы в CSS. Полное руководство с примерамиКонтекст наложения в CSS. Полное руководство с примерамиСпецифичность в CSS. Полное руководство с примерамиПодход «Pixel Perfect» в верстке сайтов. Полное руководство с примерамиНаследование в CSS. Полное руководство с примерамиCSS-правило. Полное руководство с примерамиКомментарии в CSS. Полное руководство с примерамиПринцип каскада в CSS. Полное руководство с примерамиБлочная модель в CSS. Полное руководство с примерамиСвойство all в CSS. Полное руководство с примерамиПодключение стилей к HTML. Полное руководство с примерами
Полное руководство по свойству will-change в CSSПолное руководство по transition-timing-function в CSSОсновы использования transition-property в CSS; управление плавными переходамиCSS transition-duration; Полное руководство по управлению продолжительностью переходовCSS transition-delay; Полное руководство по управлению задержкой переходовCSS transition; Полное руководство по созданию плавных переходовCSS @keyframes; Полное руководство по созданию анимацийCSS animation-timing-function; Полное руководство по управлению проигрыванием анимацийCSS animation-play-state; Полное руководство по управлению анимациямиCSS animation-name; Полное руководство по заданию имени анимацииCSS animation-iteration-count; Полное руководство по управлению количеством повторений анимацииCSS animation-fill-mode; Полное руководство по управлению состоянием элементов после анимацииCSS animation-duration; Полное руководство по управлению длительностью анимацииCSS animation-direction; Полное руководство по управлению направлением анимацииCSS animation-delay; Полное руководство с примерамиCSS-анимации; Полное руководство с примерами
Открыть базу знаний