10. Псевдоклассы :nth-child и :nth-of-type

В этом уроке мы рассмотрим мощные псевдоклассы CSS, которые позволяют более точно стилизовать элементы на веб-странице, основываясь на их позиции в дереве DOM. Речь пойдет о :nth-child и :nth-of-type.

Что такое псевдоклассы :nth-child и :nth-of-type?

Псевдоклассы :nth-child и :nth-of-type позволяют выбирать элементы на основе их порядкового номера среди дочерних элементов родительского элемента. Однако, между ними есть важное различие: :nth-child выбирает элементы вне зависимости от их типа, а :nth-of-type выбирает элементы только определенного типа.

:nth-child

Псевдокласс :nth-child(n) выбирает каждый n-ый дочерний элемент родительского элемента, независимо от его типа. n может быть числом, ключевым словом (even, odd) или формулой (например, 2n+1).

<div class="container">
  <p>Первый параграф</p>
  <div>Первый div</div>
  <p>Второй параграф</p>
  <p>Третий параграф</p>
  <div>Второй div</div>
</div>

.container p:nth-child(2) { /* Ничего не выберет, т.к. второй элемент - div */
  color: red;
}

.container *:nth-child(2) { /* Выберет первый div */
  background-color: yellow;
}

.container p:nth-child(3) { /* Выберет второй параграф */
  font-weight: bold;
}

.container p:nth-child(odd) { /* Выберет первый и третий параграфы */
  font-style: italic;
}

.container p:nth-child(even) { /* Выберет второй параграф */
  text-decoration: underline;
}

:nth-of-type

Псевдокласс :nth-of-type(n) выбирает каждый n-ый дочерний элемент указанного типа родительского элемента. n также может быть числом, ключевым словом (even, odd) или формулой.

<div class="container">
  <p>Первый параграф</p>
  <div>Первый div</div>
  <p>Второй параграф</p>
  <p>Третий параграф</p>
  <div>Второй div</div>
</div>

.container p:nth-of-type(1) { /* Выберет первый параграф */
  color: blue;
}

.container div:nth-of-type(2) { /* Выберет второй div */
  background-color: green;
}

.container p:nth-of-type(odd) { /* Выберет первый и третий параграфы */
  font-size: 1.2em;
}

.container p:nth-of-type(even) { /* Выберет второй параграф */
  color: purple;
}

Практические примеры кода

<ul class="list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

.list li:nth-child(odd) { /* Стилизуем нечетные элементы списка */
  background-color: #f2f2f2;
}

.list li:nth-child(even) { /* Стилизуем четные элементы списка */
  background-color: #ffffff;
}

.list li:nth-of-type(3n+1) { /* Стилизуем каждый 3n+1 элемент списка */
  font-weight: bold;
}

Жизненный пример

Эти псевдоклассы широко используются для стилизации таблиц, списков и других элементов, где необходимо чередовать стили. Например, многие библиотеки UI-компонентов (Bootstrap, Material UI) используют :nth-child или :nth-of-type для создания полосатых таблиц (zebra stripes), делая их более читабельными. Также, их часто используют для стилизации элементов навигации, выделяя активный пункт меню или изменяя стиль при наведении курсора. Различные веб-приложения и сайты электронной коммерции используют их для стилизации списков товаров или элементов интерфейса.

Ключевые моменты

• :nth-child выбирает элементы, основываясь на их позиции среди всех дочерних элементов родителя.
• :nth-of-type выбирает элементы, основываясь на их позиции среди дочерних элементов определенного типа.
• Оба псевдокласса принимают число, ключевое слово (even, odd) или формулу как аргумент.
• Используются для чередования стилей, выделения элементов и создания более читабельных интерфейсов.
• Широко применяются в UI-библиотеках и веб-приложениях.

Интерактивный пример